元素显示上的CSS淡入淡出动画

Question

我有这个模板http://t2themes.com/themes/workout/demo我试图以网站为每个元素、文章等设置动画的方式为 div 设置动画，但我找不到正确的代码。如果我使用这段代码:

div.anim {
-webkit-animation:flipInX 1.2s 0s 向前缓动；
-moz-动画:flipInX 1.2s 0s 向前缓动；
-o-动画:flipInX 1.2s 0s 向前缓动；
动画:flipInX 1.2s 0s 向前缓动；
不透明度:0； }

我的 div 动画但它在页面加载时动画。当它像演示中的“程序”部分一样出现在屏幕上时，我想制作动画。我还想在 6 个 div 上执行此操作，并且使用我的代码它们都同时制作动画，我希望动画像演示中一样，一次一个

我该怎么做？

Answer 1

当用户滚动到屏幕上的那个位置时，他们使用 jQuery 加载元素。您需要实现一些 jQuery/JS 来检测用户在页面上的位置，然后显示该元素。

他们正在做的是在用户到达他们制作动画的那个位置时添加一个“动画”类(任意类名)。

下面的代码片段检测用户何时滚动，如果用户滚动超过 500px，则它向(在本例中)ID 添加一个类(在本例中称为)“animate”。

希望对您有所帮助。

<script type="text/javascript">
// <![CDATA[
(function($){
    $(document).ready(function(){
        $(document).scroll(function() {
            if ( $(document).scrollTop() > 500 ) {
                $('#ELEMENTID').addClass('animate');
            }
        })
    });
})(jQuery);
// ]]>
</script>