Animate.css
2017-05-21 本文已影响106人
MGd
使用
-
1.github中搜索animate.css
-
2.下载下来
- 3.在html中引用动画库
< head >
< link rel = “ stylesheet ” href = “ animate.min.css ” >
</ head >
语法（实现动画效果）
- 例子：
//将类animated添加到要动画的元素
//最后，您需要添加实现动画效果的类
<style>
div{
width: 200px;
height: 200px;
background: red;
margin: 100px auto;
}
</style>
<body>
<div class="animated slideInRight"></div>
</body>
- 封装好的动画类名有很多，不会一一去记，所以：
-
搜索最牛前端，点击进入前端人的俱乐部
- 点击选择左侧的“框架/库”然后再选择右侧中“动画库”里面的“Animate”
-
查看需要什么样的动画
内容
- 定制
- 就是在原有的基础上进行定制
.animated {
animation-duration: 5s;
animation-fill-mode: both;
}
//在样式中给animate进行自定义设置动画时长
