评论：Animate.css 一款强大的预设css3动画库  [查看原文]

西瓜0
2020/11/7 20:05:54
animate-duration: 2s; //动画持续时间

针对作者写的最后一点我想小小纠正下（因为我也在此栽了跟头）：如果不想要插件带的的动画，可以使用以下方法
前提:必须引入css插件和jquery插件

$('.yourelement').css({
    'animation-delay': '4s',  //动画延迟时间
    'animation-iteration-count':'4'
})

原文作者的误写，应该改为
1、animate写成animation
2、属性值加到css上，而不是直接加给元素
3、属性值和值都需要加引号
4、对象之间是使用英文逗号隔开，而不是分号
以上任何一种不写对都会导致效果不会实现，如果不严谨的话会使我们初学者误入歧途，深深不能自拔，找不到错误在哪里

IT青年0
2018/12/13 14:29:46
感谢感谢！

AnotherWay_05360
2019/3/1 11:48:09
作者写的方法应该是在CSS文件中做限制的。

Jason1
2018/10/25 17:04:25
有个dely效果，延迟的。把持续时间和dely时间对上号就可以了

huangpp1
2018/10/23 10:46:51

@keyframes xx {
    from {
        //起始
    }
    to {
        //结束
    }
}

animation-duration: 1s;
/*动画持续时间*/
animation-delay: 0.6s;
/*动画延迟时间*/
animation-iteration-count: 2;
/*动画执行次数*/

模拟弹出窗0
2018/6/28 16:04:19
循环：infinite

让滚动条到达图片位置时，图片才开始动画，怎么实现呢？

颠覆世界的一个人1
2018/5/30 16:03:28

在用户滚动到元素时，在</ body>标签之前添加以触发动画


<script>
    $(window).scroll(function() {
        $('#animatedElement').each(function() {
            var imagePos = $(this).offset().top;

            var topOfWindow = $(window).scrollTop();
            if (imagePos < topOfWindow + 400) {
                $(this).addClass("slideUp");
            }
        });
    });
</script>

将#animatedElement替换为您想要动画的元素的ID或类。
将slideUp替换为动画类。
400代表元素和屏幕顶部之间的空间。当元素距离屏幕顶部400px时，动画将激活。增加此数字可以使动画游戏更快启动。

zwb0
2018/9/26 9:19:32
有个叫wow.js的插件 配合animate.css好用到爆炸

???? ??0
2018/10/25 11:00:44
wow.js不支持手机！！！这是最关键的，PC上用还很不错，手机就不行了！有bug！

animation-iteration-count: infinite;    //动画执行次数

为什么我设置了这个还是只执行一次动画？

不习惯的习惯1
2018/11/18 19:56:29

$('.one').css({
    'animation-delay': '4s',  //动画延迟时间
    'animation-iteration-count':'4'
})

这样写才可以，需要注意的是属性和属性值都要加引号，不管是数字值还是什么，一旦不加引号就会没有效果

animate-duration: 2s;

    animate-delay: 1s;

    animate-iteration-count: 2;请问楼主，这些动画属性是写在css里面吗，为什么我写了没效果呢

无头的JOKER0
2017/9/20 9:11:32

他这里写错了，是写在CSS里面但是是这样的

animation-delay: 2s

为什么ios不怎么兼容呢？

为了、生存0
2017/7/26 15:55:41

动画第一次点开链接的时候fadeInleft的动画执行，关闭再次打开动画就不执行了，什么原因呢？

DIV0
2017/10/30 11:08:30
我也是的额