animate.css动画库使用方法介绍

港控/mmm° 2022-05-16 02:50 508阅读 0赞

*Swiper*(*Swiper* master)是目前应用较广泛的移动端网页触摸内容滑动js插件，下面是一些动画相关的总结。

**animate.css动画库简介**   
Animate.css是由Dan Eden的Daniel Eden使用CSS3的animation制作的动画效果的CSS集合。   
它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了所有常见的动画效果。换句话说：Animate.css就是一大堆的很酷，很有趣，而且很炫又能跨浏览器的动画效果样式集锦，可以直接使用到项目中。

**animate.css动画库的浏览器兼容性**   
只兼容支持 CSS3 animate 属性的浏览器，他们分别是：IE10+、Firefox、Chrome、Opera、Safari。

**使用方法**   
1、引入文件 [animate.css动画库下载地址][animate.css]

2、HTML 及使用

给元素加上 class 后，刷新页面，就能看到动画效果了。animated 类似于全局变量，它定义了动画的持续时间；bounce 是动画具体的动画效果的名称，你可以选择任意的效果。

如果你要使用永续动画，可以在class中加上infinite(如果你用的是百度静态资源库的animate.css,这个好像就实现不了了)；如：

你也可以通过 JavaScript 或 jQuery 给元素添加这些 class，比如：

$(function(){
        $('#hepai').addClass('animated bounce');
    });

有些动画效果最后会让元素不可见，比如淡出、向左滑动等等，可能你又需要将 class 删除，比如：

$(function(){
        $('#hepai').addClass('animated bounce');
        setTimeout(function(){
            $('#dowebok').removeClass('bounce');
        }, 1000);
    });

animate.css 的默认设置也许有些时候并不是我们想要的，所以你可以重新设置，比如：

#hepai {
        -webkit-animation-duration: 2s;
        -webkit-animation-delay: 1s;
        -webkit-animation-iteration-count: 2;
    }

[animate.css动画形式参考][animate.css 1]

--------------------

![20191229112121499.png][]

想要整理更多的碎片知识，扫码关注下面的公众号，让我们在哪里接着唠！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70][]

[animate.css]: https://github.com/daneden/animate.css
[animate.css 1]: https://daneden.github.io/animate.css/
[20191229112121499.png]: /images/20220516/452da86408f741128308f0f42ab237d3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70]: /images/20220516/aa0a2e5ca73f4e8f8857eeaad64a5648.png