animate.css引入实现动画效果

　　最近在网上看到很多代码都通过引入animate.css来实现动画效果，后来我便使用这种方法来尝试着写了个小案例，结果真的很好用，比我们通常情况下使用css或js实现动画效果好得多，便在此做个总结。

　　第一步，便是下载相关的animate.css文件，方法有三种：

　　　　1.从官网下载：

　　　　　　https://raw.github.com/daneden/animate.css/master/animate.css

　　　　2.通过npm下载：

　　　　　　$ npm install animate.css

　　　　3.使用在线cdn：

　　　　　　https://unpkg.com/animate.css@3.5.2/animate.min.css

　　第二步，便是写上页面结构，引入animate.css文件：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7   <link rel="stylesheet" type="" href="./animate.css">
 8   <title>Document</title>
 9   <style>
10     #dowebok {
11       height: 100px;
12       width: 100px;
13       background-color: pink;
14     }
15   </style>
16 </head>
17 <body>
18   <!-- <div class="animated bounce" id="dowebok"></div> -->
19   <!-- <div class="animated flash" id="dowebok"></div> -->
20   <!-- <div class="animated pulse" id="dowebok"></div> -->
21   <!-- <div class="animated rubberBand" id="dowebok"></div> -->
22   <!-- <div class="animated shake" id="dowebok"></div> -->
23   <!-- <div class="animated headShake" id="dowebok"></div> -->
24   <!-- <div class="animated swing" id="dowebok"></div> -->
25   <!-- <div class="animated tada" id="dowebok"></div> -->
26   <!-- <div class="animated wobble" id="dowebok"></div> -->
27   <!-- <div class="animated jello" id="dowebok"></div> -->
28   <!-- <div class="animated slideInDown" id="dowebok"></div> -->
29   <div class="animated rotateIn" id="dowebok"></div>
30 </body>
31 </html>

　　如上代码所示，这里边通过添加不同的类，便可以实现不同的动画效果，下面边介绍一下相关的类：

　　主要的动画大类有Attention(晃动效果)、bounce(弹性缓冲效果)、fade(透明度变化效果)、flip(翻转效果)、rotate(旋转效果)、slide(滑动效果)、zoom(变焦效果)、special(特殊效果)这8类。

　　（1）Attention(晃动效果)】

bounce
flash
pulse
rubberBand
shake
headShake
swing
tada
wobble
jello

　　（2）【bounce(弹性缓冲效果)】

bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp

　　（3）【fade(透明度变化效果)】

fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig

　　（4）【flip(翻转效果)】

flip
flipInX
flipInY
flipOutX
flipOutY

　　（5）【rotate(旋转效果)】

rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight

　　（6）【slide(滑动效果)】

slideInDown
slideInLeft
slideInRight
slideInUp
slideOutDown
slideOutLeft
slideOutRight
slideOutUp

　　（7）【zoom(变焦效果)】

zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp

　　（8）【special(特殊效果)】

hinge
rollIn
rollOut
lightSpeedIn
lightSpeedOut

实际应用

　　通过给JS添加或删除class，可以实现动态效果。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Document</title>
 6 <link rel="stylesheet" href="https://unpkg.com/animate.css@3.5.2/animate.min.css">
 7 <style>
 8 .box{height: 100px;width: 100px;background-color: lightblue}
 9 </style>
10 </head>
11 <body>
12 <button id="btn1">添加</button>
13 <button id="btn2">移除</button>
14 <div id="box" class="box"></div>
15 <script>
16 var oBtn1 = document.getElementById('btn1');
17 var oBtn2 = document.getElementById('btn2');
18 var oBox = document.getElementById('box');
19 oBtn1.onclick = function(){
20   oBox.classList.add('animated');
21   oBox.classList.add('flash');
22 }
23 oBtn2.onclick = function(){
24   oBox.classList.remove('flash');
25 }
26 </script>
27 </body>
28 </html>

　至于动画的配置参数，比如动画持续时间，动画的执行次数等等，可以在元素上自行定义，覆盖掉animate.css里面所定义的就行了。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Document</title>
 6 <link rel="stylesheet" href="https://unpkg.com/animate.css@3.5.2/animate.min.css">
 7 <style>
 8 .box{height: 100px;width: 100px;background-color: lightblue}
 9 .infinite{animation-iteration-count:infinite;}
10 </style>
11 </head>
12 <body>
13 <button id="btn1">添加循环的动画效果</button>
14 <button id="btn2">移除</button>
15 <div id="box" class="box"></div>
16 <script>
17 var oBtn1 = document.getElementById('btn1');
18 var oBtn2 = document.getElementById('btn2');
19 var oBox = document.getElementById('box');
20 oBtn1.onclick = function(){
21   oBox.classList.add('animated');
22   oBox.classList.add('flash');
23   oBox.classList.add('infinite');
24 }
25 oBtn2.onclick = function(){
26   oBox.classList.remove('flash');
27 }
28 </script>
29 </body>
30 </html>

　　这也仅仅是通过http://www.cnblogs.com/xiaohuochai/p/7372665.html学习来的东西，便现学现卖了~

更多专业前端知识，请上【猿2048】www.mk2048.com

animate.css引入实现动画效果相关推荐

html 放上去动画停止,使用jQuery的animate()+CSS样式实现动画效果及stop()停止动画
01第1节:jQuery动画概述 #JavaScript#在jQuery中,除了可以淡入淡出.滑动效果之外,还可以使用animate()方法创建自定义的动画效果. 对于自定义的动画函数animate( ...
CSS实现文字动画效果
今天来到了我们的第20个小项目的练习,距离我们100个小项目的练习,我们已经完成了五分之一了,剩下的五分之四,我们一起加油练习. 今天练习的这个小项目是一个CSS实现的文字动画效果,主要就是用在页面加 ...
CSS实现文字动画效果【每日一题】
今天练习的这个小项目是一个CSS实现的文字动画效果,主要就是用在页面加载时的效果,现在,我们一起来看一下这个项目的最终效果: HTML代码: <!DOCTYPE html> <htm ...
CSS 中使用动画效果实现点赞特效
CSS 中使用动画效果实现点赞特效效果图当没有点赞的时候, 页面上只有的图标是黑色的点赞之后, 出现一个缓缓上升的红心赞, 之后页面上的赞变为取消, 图标变为红色缓缓上升的红心赞会左右摇摆 - ...
【每日一练】20—CSS实现文字动画效果
写在前面今天来到了我们的第20个小项目的练习,距离我们100个小项目的练习,我们已经完成了五分之一了,剩下的五分之四,我们一起加油练习. 今天练习的这个小项目是一个CSS实现的文字动画效果,主要就是 ...
html 动画div右侧消失,使用animate.css时，动画一开始不隐藏,如何解决呢？
animate.css 的入场动画,一开始(初始态)怎么隐藏呢?(否则会闪一下.) 动画结束后要保持显示. 补充.. 使用了官网推荐的jquery 扩展代码,运动完后自动删除 class. 这是一个坑 ...
css有哪些动画效果怎么实现的
css常见的动画效果:平移,缩放,旋转 css实现动画主要有三种方式: transition实现渐变动画 transform实现缩放平移效果动画 animation实现自定义动画 transition ...
HTML5纯css实现爱心动画效果DW、vscode来自程序员的浪漫表白
HTML5纯css实现爱心动画效果DW来自程序员的浪漫表白一.拉面版 css部分 *{/* 初始化页面元素内外边距*/margin:0;padding: 0;}body{/* 弹性布局元素垂直水平居 ...
css玻璃雨滴效果,CSS实现雨滴动画效果的实例代码
玻璃窗今天我们要实现的是雨滴效果,不过实现雨滴前,我们先把毛玻璃的效果弄出来,没有玻璃窗,雨都进屋了,还有啥好敲打的. .window { position: absolute; width: 10 ...

animate.css引入实现动画效果

实际应用

animate.css引入实现动画效果相关推荐

最新文章

热门文章