查看更多精彩前端资源

给大家推荐一款简单而又实用的CSS3动画库--Animate.css！Animate.css的非压缩大小仅为24k，包含了许多酷炫实用的css3预设动画，是一个跨浏览器的预设动画库。其首页demo地址为https://daneden.github.io/animate.css/ 其中有各种animate.css动画的使用类名以及预览效果。
引入animate

[HTML] 纯文本查看 复制代码

<link rel="stylesheet" href="./animate.css">

给指定的元素加上指定的类名（动画名）

[HTML] 纯文本查看 复制代码

<div class="box animated flip"></div>

注意使用animate.css必须加上animated类名，再根据不同的动画效果加上不同的类名，如flip。此时，一个炫酷的css3动画就完成了。
当然，如果想给元素动态添加动画，也可以通过js给元素动态添加类名实现

[JavaScript] 纯文本查看 复制代码

box.classList.add("animated","flip")

或者

[JavaScript] 纯文本查看 复制代码

$(".box").addClass("animated flip");

动画的回调函数

[JavaScript] 纯文本查看 复制代码

$('.box').on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function () {  })

修改animate.css中的动画
如果需要对animate.css中的动画进行修改，也可以打开animate.css文件找到具体动画进行修改

[CSS] 纯文本查看 复制代码

.animated.bounceOut {
  animation-duration: .75s;
}

可以可以,666的

竟然有这种骚操作，简直666~~

功能十分强大！感谢楼主的分享！

功能十分强大！感谢楼主的分享！

老皮很强势

感谢分享