正文
animate.css（第三方动画使用方法）
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
animation
语法:
animation: name duration timing-function delay iteration-count direction;
animation-name: 规定需要绑定到选择器的 keyframe 名称。。
animation-duration: 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function: 规定动画的速度曲线。
animation-delay: 规定在动画开始之前的延迟。
animation-iteration-count: 规定动画应该播放的次数。（值：n次，infinite无限循环）
animation-direction: 规定是否应该轮流反向播放动画。
浏览器兼容：
当然是只兼容支持 CSS3 animate 属性的浏览器，他们分别是：IE10+、Firefox、Chrome、Opera、Safari。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>animation</title>
/*首先要引入animate.css*/
<link rel="stylesheet" type="text/css" href="css/animate.css"/>
<style type="text/css">
.div1{
width: 100px;
height: 100px;
background: red;
margin: 100px auto;
} /*第三方的第二种用法*/
.div2{
width: 100px;
height: 100px;
background: yellowgreen;
margin: 300px auto;
animation: bounce 3s infinite;
}
</style>
</head>
<body>
<!--第三方动画库的使用
1.名字叫:animate.css
2.封装了很多工作中常用的动画
3.*在使用第三方时候,需要加上animated类名
-->
<!--主要分类:可以参考官网自己设置
bounce:弹性动画类
flash:逐渐消失
pulse:脉冲动画
shake:抖动
-->
<!--第一种使用方法-->
<div class="div1 animated bounceIn infinite "></div> <div class="div2"></div>
</body>
</html>
