animate.css（第三方动画使用方法）

最新推荐文章于 2022-03-21 22:27:39 发布

weixin_30780221

最新推荐文章于 2022-03-21 22:27:39 发布

阅读量171

点赞数

原文链接：http://www.cnblogs.com/candylily/p/6256441.html

版权

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。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>animation</title>
　　　　　　/*首先要引入animate.css*/
 6         <link rel="stylesheet" type="text/css" href="css/animate.css"/>
 7         <style type="text/css">
 8             .div1{
 9                 width: 100px;
10                 height: 100px;
11                 background: red;
12                 margin: 100px auto;
13             }
14             
15             /*第三方的第二种用法*/
16             .div2{
17                 width: 100px;
18                 height: 100px;
19                 background: yellowgreen;
20                 margin: 300px auto;
21                 animation: bounce 3s infinite;
22             }
23         </style>
24     </head>
25     <body>
26         <!--第三方动画库的使用
27                 1.名字叫:animate.css
28                 2.封装了很多工作中常用的动画
29                 3.*在使用第三方时候,需要加上animated类名
30         -->
31         <!--主要分类:可以参考官网自己设置
32                 bounce:弹性动画类
33                 flash:逐渐消失
34                 pulse:脉冲动画
35                 shake:抖动
36         -->
37         <!--第一种使用方法-->
38         <div class="div1 animated bounceIn infinite "></div>
39         
40         <div class="div2"></div>
41     </body>
42 </html>

转载于:https://www.cnblogs.com/candylily/p/6256441.html

weixin_30780221

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
animate.css（第三方动画使用方法）

animation　　语法:　　　 animation: name duration timing-function delay iteration-count direction;　　　　animation-name: 　　　　规定需要绑定到选择器的 keyframe 名称。。　　　　animation-duration:　　　　规定完成动...
复制链接

扫一扫