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

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <meta http-equiv="X-UA-Compatible" content="ie=edge">

   <link rel="stylesheet" type="" href="./animate.css">

   <title>Document</title>

   <style>

     #dowebok {

       height: 100px;

       width: 100px;

       background-color: pink;

     }

   </style>

 </head>

 <body>

   <!-- <div class="animated bounce" id="dowebok"></div> -->

   <!-- <div class="animated flash" id="dowebok"></div> -->

   <!-- <div class="animated pulse" id="dowebok"></div> -->

   <!-- <div class="animated rubberBand" id="dowebok"></div> -->

   <!-- <div class="animated shake" id="dowebok"></div> -->

   <!-- <div class="animated headShake" id="dowebok"></div> -->

   <!-- <div class="animated swing" id="dowebok"></div> -->

   <!-- <div class="animated tada" id="dowebok"></div> -->

   <!-- <div class="animated wobble" id="dowebok"></div> -->

   <!-- <div class="animated jello" id="dowebok"></div> -->

   <!-- <div class="animated slideInDown" id="dowebok"></div> -->

   <div class="animated rotateIn" id="dowebok"></div>

 </body>

 </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，可以实现动态效果。

 <!DOCTYPE html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <title>Document</title>

 <link rel="stylesheet" href="https://unpkg.com/animate.css@3.5.2/animate.min.css">

 <style>

 .box{height: 100px;width: 100px;background-color: lightblue}

 </style>

 </head>

 <body>

 <button id="btn1">添加</button>

 <button id="btn2">移除</button>

 <div id="box" class="box"></div>

 <script>

 var oBtn1 = document.getElementById('btn1');

 var oBtn2 = document.getElementById('btn2');

 var oBox = document.getElementById('box');

 oBtn1.onclick = function(){

   oBox.classList.add('animated');

   oBox.classList.add('flash');

 }

 oBtn2.onclick = function(){

   oBox.classList.remove('flash');

 }

 </script>

 </body>

 </html>

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

 <!DOCTYPE html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <title>Document</title>

 <link rel="stylesheet" href="https://unpkg.com/animate.css@3.5.2/animate.min.css">

 <style>

 .box{height: 100px;width: 100px;background-color: lightblue}

 .infinite{animation-iteration-count:infinite;}

 </style>

 </head>

 <body>

 <button id="btn1">添加循环的动画效果</button>

 <button id="btn2">移除</button>

 <div id="box" class="box"></div>

 <script>

 var oBtn1 = document.getElementById('btn1');

 var oBtn2 = document.getElementById('btn2');

 var oBox = document.getElementById('box');

 oBtn1.onclick = function(){

   oBox.classList.add('animated');

   oBox.classList.add('flash');

   oBox.classList.add('infinite');

 }

 oBtn2.onclick = function(){

   oBox.classList.remove('flash');

 }

 </script>

 </body>

 </html>

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

animate.css引入实现动画效果的更多相关文章

  1. vue2借助animate.css实现路由动画效果

    第一步: npm install animate.css --save 第二步:打开main.js import animate from 'animate.css' Vue.use(animate) ...

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

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Monaco; color: #a5b2b9 } animation 语法: animatio ...

  3. vue使用animate.css类库实现动画

    首先安装animate.css类库 cnpm install animate.css –save 然后在vue的script文件中引用 import $ from '../assets/js/jque ...

  4. 第五章 动画 44：动画-使用第三方animate.css类库实现动画

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  5. css实现边框动画效果

    最近写了几个页面都用到css动画,以及很多before,after伪类.在此记录一下成果.css边框循环动画,页面效果如下: 1.沿着边框动画的图形使用before,after伪类写的.当时想用切图来 ...

  6. css实现图片动画效果

    需求 项目里有个消息中心,当有消息的时候,小铃铛图标可以晃两下,提示当前有信息. 实现过程 书写css 使用css的keyframe属性,配合animation. @keyframes ringing ...

  7. Ionic3学习笔记（五）动画之使用 animate.css

    本文为原创文章,转载请标明出处 目录 前言 animate.css 的使用 animate.scss 的使用 1. 前言 animate.css 是一款强大的.跨浏览器的预设CSS3动画库,内置了很多 ...

  8. css3动画和animate.css动画库使用

    CSS3动画 css3动画可以分为两种.transition过渡动画和keyframes关键帧动画 过渡动画 第一种叫过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动 ...

  9. animate.css+wow.js页面滚动即时显示动画

    1.地址引入 <link href="css/animate.min.css" rel="stylesheet" type="text/css& ...

随机推荐

  1. IDEA导入个性化主题的方法

    IDEA的主题可以自定义,也可从网上下载 http://www.riaway.com/theme.php 喜欢的主题,保存到本地. 主题是一个jar的包.导入到idea的方法如下: file –> ...

  2. win系统如何在桌面显示我的电脑

    如果是在Windows Server 2012本地控制台下,直接按Win(键盘上的微软徽标键)+R,输入: rundll32.exe shell32.dll,Control_RunDLL desk.c ...

  3. Nginx+php-fpm 502 504问题

    常出现502,504错误 思路: 增大nginx与php-fpm通信时的缓存文件大小与个数 静态绑定5个php-fpm进程,减少频率启动进程的开销 利用sock文件代替tcp端口通信 解决办法: 调整 ...

  4. 路飞学城Python-Day150

    最近由于在忙别的事情,所以路飞的课程就往后延期了,感觉很难受,不过我还是依然坚持学下去,必须的 最近在忙的事情 1.进入了数据分析行业,需要学习更多的知识 2.开始对数据收集负责,写各种爬虫 3.对数 ...

  5. mysql笔记1------基础

    1.简介 (这两个结构就是ER模型)

  6. DedeCMS用channelartlist调用顶级栏目及列表

    这个标签全局都可使用,可以减少多次使用 {dede:arclist typeid=‘栏目ID’titlelen='60' row='10'}.除了宏标记外,{dede:channelartlist}是 ...

  7. vue开发基本步骤

    1      安装node.js 安装node.js之前,先进行nvm的安装: https://github.com/coreybutler/nvm-windows/releases最好选择稳定版本 ...

  8. java实现QQ空间模拟登录

    import java.io.File; import java.io.FileNotFoundException; import java.io.FileOutputStream; import j ...

  9. adb简单使用

    一.基本命令 1.查看目前连接的设备/虚拟器的状态 adb devices

  10. 导出MNIST的数据集

    在TensorFlow的官方入门课程中,多次用到mnist数据集. mnist数据集是一个数字手写体图片库,但它的存储格式并非常见的图片格式,所有的图片都集中保存在四个扩展名为idx3-ubyte的二 ...