Animate.js是一个超轻（小于1kb）的jQuery AOS（滚动动画）插件，当元素出现在视口中时，它会将CSS支持的动画应用于元素。

参见：

• 10年

如何使用它:

1.在文档中加载必要的jQuery JavaScript库。

<script src="/path/to/cdn/jquery.min.js"></script>

2.检测目标元素的位置并在滚动到视图中时对其应用特定CSS类的功能。

• 目标类别：目标元素的CSS选择器
• 动画类：动画类
• 重置打开滚动：向上滚动时重置插件

$(window).on("load", function() {
  function AnimateOnScroll(targetClass, animationClass, resetOnScrollUp) {
    targetClass = "." + targetClass;
    jQuery(function($) {
      $(window).scroll(function() {
        var windowBottom = $(this).scrollTop() + $(this).innerHeight();
        $(targetClass).each(function() {
            /* Check the location of each desired element */
            var objectBottom = $(this).offset().top;
            if (objectBottom < windowBottom) {
                $(this).addClass(animationClass);
            } else if (resetOnScrollUp) {
                $(this).removeClass(animationClass);
            }
        });
      }).scroll();
    });
  };
  // override the settings here
  AnimateOnScroll("box", "rotate-scale-up", true)
});

3.一个真实世界的例子。

<div class="box">
  Element To Animate
</div>

.rotate-scale-up {
  -webkit-animation: rotate-scale-up .65s linear both;
  animation: rotate-scale-up .65s linear both
}

@-webkit-keyframes rotate-scale-up {
  0% {
    -webkit-transform: scale(1) rotateZ(0);
    transform: scale(1) rotateZ(0)
  }
  50% {
    -webkit-transform: scale(2) rotateZ(180deg);
    transform: scale(2) rotateZ(180deg)
  }
  100% {
    -webkit-transform: scale(1) rotateZ(360deg);
    transform: scale(1) rotateZ(360deg)
  }
}

@keyframes rotate-scale-up {
  0% {
    -webkit-transform: scale(1) rotateZ(0);
    transform: scale(1) rotateZ(0)
  }
  50% {
    -webkit-transform: scale(2) rotateZ(180deg);
    transform: scale(2) rotateZ(180deg)
  }
  100% {
    -webkit-transform: scale(1) rotateZ(360deg);
    transform: scale(1) rotateZ(360deg)
  }
}

预览截图

基于滚动位置触发CSS动画 Animate.js