css CSS - Layout.css动画插件

Posted 2021-05-13

var screenHeight = $(window).height();
    $(".full-height").height(screenHeight);
    $("#loading-screen").delay(500).fadeOut("slow");
    $.fn.isInViewport = function() {
      var elementTop = $(this).offset().top;
      var elementBottom = elementTop + $(this).outerHeight();
      var viewportTop = $(window).scrollTop();
      var viewportBottom = viewportTop + $(window).height();
      return elementBottom > viewportTop && elementTop < viewportBottom;
    };
    $(window).on('resize scroll load', function() {
      $(".animate").each(function(index, el) {
        var test = $(this);
        var answer = test.isInViewport();
        if (answer === true){
          var animation = test.data("animation");
          if (animation == null) {
            animation = "fadeInLeft";
          }
          test.addClass(animation).addClass('animated').removeClass('animate');
        } 
      });
    });

 /* Template - Animations
   ============================================== */
   @keyframes spinning_animation{0%{ transform:scale(1) rotate(0deg);  -o-transform:scale(1) rotate(0deg)}
   50%{ transform:scale(0.8) rotate(360deg);  -o-transform:scale(0.8) rotate(360deg)}
   100%{ transform:scale(1) rotate(720deg);  -o-transform:scale(1) rotate(720deg)}
   }

   @-webkit-keyframes spinning_animation{0%{ -webkit-transform:scale(1) rotate(0deg)}
   50%{ -webkit-transform:scale(0.8) rotate(360deg)}
   100%{ -webkit-transform:scale(1) rotate(720deg)}

   }

   @keyframes bounce_in_animation{0%{ transform:scale(0,0);  -o-transform:scale(0,0)}
   20%{ transform:scale(1.4,1.4);  -o-transform:scale(1.4,1.4)}
   50%{ transform:scale(0.8,0.8);  -o-transform:scale(0.8,0.8)}
   85%{ transform:scale(1.1,1.1);  -o-transform:scale(1.1,1.1)}
   100%{ transform:scale(1,1);  -o-transform:scale(1,1)}
   }

   @-webkit-keyframes bounce_in_animation{0%{ -webkit-transform:scale(0,0)}
   20%{ -webkit-transform:scale(1.4,1.4)}
   50%{ -webkit-transform:scale(0.8,0.8)}
   85%{ -webkit-transform:scale(1.1,1.1)}
   100%{ -webkit-transform:scale(1,1)}
   }

   @keyframes grow_in_animation{0%{ transform:scale(0,0);  -o-transform:scale(0,0)}
   100%{ transform:scale(1,1);  -o-transform:scale(1,1)}
   }

   @-webkit-keyframes grow_in_animation{0%{ -webkit-transform:scale(0,0)}
   100%{ -webkit-transform:scale(1,1)}
   }

   @keyframes scrollDownHero {
    from {
      bottom:89px;
    }
    to{
      bottom:55px;
    }
   }
 /* ============================================= */