animate.css引入实现动画效果

最新推荐文章于 2022-12-23 23:02:10 发布

我爱丁丁猫

最新推荐文章于 2022-12-23 23:02:10 发布

阅读量1.3k

点赞数 1

分类专栏：前端文章标签：知识总结 css3 插件 animate.css引入实现动画效果

原文链接：https://www.mk2048.com/blog/blog.php?id=h0ki120bh1cb&title=animate.css%E5%BC%95%E5%85%A5%E5%AE%9E%E7%8E%B0%E5%8A%A8%E7%94%BB%E6%95%88%E6%9E%9C

版权

前端专栏收录该内容

1898 篇文章 4 订阅

订阅专栏

　　最近在网上看到很多代码都通过引入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

我爱丁丁猫

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
animate.css引入实现动画效果

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

扫一扫