黑马程序员技术交流社区

标题: 【广州前端】Animate.css一款简单又实用的CSS3动画库 [打印本页]

---

作者: AreYouGlad    时间: 2017-12-1 14:17
标题: 【广州前端】Animate.css一款简单又实用的CSS3动画库

查看更多精彩前端资源

给大家推荐一款简单而又实用的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;

}

animate.rar

2017-12-20 16:22 上传

点击文件名下载附件

3.02 KB, 下载次数: 227

---

作者: 李盼盼老师    时间: 2017-12-1 14:51
可以可以,666的

---

作者: AreYouGlad    时间: 2017-12-1 16:39

---

作者: AngularBaby    时间: 2017-12-2 17:36
竟然有这种骚操作，简直666~~

---

作者: xiaojiyao    时间: 2017-12-4 13:06
功能十分强大！感谢楼主的分享！

---

作者: yezhimo    时间: 2017-12-5 18:27
功能十分强大！感谢楼主的分享！

---

作者: q947544128    时间: 2017-12-5 19:22
老皮很强势

---

作者: AreYouGlad    时间: 2017-12-13 17:46

---

作者: hz有盼头啊    时间: 2017-12-14 08:27
感谢分享

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2