A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 AreYouGlad 于 2017-12-20 16:22 编辑


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

3.02 KB, 下载次数: 227

8 个回复

倒序浏览
可以可以,666的
回复 使用道具 举报
回复 使用道具 举报
竟然有这种骚操作,简直666~~
回复 使用道具 举报
xiaojiyao 来自手机 初级黑马 2017-12-4 13:06:21
报纸
功能十分强大!感谢楼主的分享!
回复 使用道具 举报
yezhimo 来自手机 初级黑马 2017-12-5 18:27:49
地板
功能十分强大!感谢楼主的分享!
回复 使用道具 举报
老皮很强势
回复 使用道具 举报
回复 使用道具 举报
感谢分享
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马