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。

 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

animate.css（第三方动画使用方法）相关推荐

怎样控制animate.css的动画时间
打开 animate.css 第一行 .animated {animation-duration: 1s;animation-fill-mode: both; } animation-duration ...
Vue CSS3或者npmjs网站中的animate.css实现动画效果
cartoonvue.vue(CSS3)支持一个动画 <template><div><h2>动画效果 ...
vue --- 使用animate.css实现动画
1.下载animate.css npm install --save-dev animate.css// 注意你使用的源 nrm ls(若没有改变可以忽略) 2.导入animate.css <l ...
前端之vue3使用动画库animate.css(含动画、过渡)
动画与过渡一.动画效果 1.默认动画实例动画语法 2.给transition指定name 二.过渡效果三.多个元素过渡四.vue3使用动画库动画库animate.css √ 五.总结一. ...
animate.css 签字动画,使用animate.css完成动画
animate.css aniamte.css是一个很方便的库,内置了许多常用的动画和jquery搭配使用比较方便 $.fn.extend({ animateCss: function (anima ...
react使用animate.css完成动画
1.引入依赖库 cnpm i animate.css cnpm i react-addons-css-transition-group 2.导入模块 import "animate.css& ...
animate.css 自定义动画
在使用animate.css 的时候动画的高度超过了预期的高度在这种情况下肯定是过不了测试的,怎么办的? <div class="fold-div animated " ...
前端之Html+Css实现动画的方法
在不使用JS.Canvas.gif等其他方式的情况下,前端实现动画的方式有Css3的transform属性.transition属性和animation属性三种方式. 1.transform属性可以 ...
html css animate,animate.css
这是个css3动画框架,现在很流行,在小动画效果有很多,使用的方式 /*只要修改bounce这个类就可以*/ 一.atention Seekers 1.bounce 2.flash 3.pulse 4 ...

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

animate.css（第三方动画使用方法）相关推荐

最新文章

热门文章