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>

秒客网

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

相关文章