最近在网上看到很多代码都通过引入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. 【Oracle】Rman简介

    1.备份和恢复功能的用途: –保护数据 -介质故障 -用户错误 -应用程序错误 –数据保存和历史数据保留 –数据传输 2.典型的备份和恢复任务 –通过配置数据库实现可恢复 –定义备份计划 –对不同类型 ...

  2. Cocos2d-x-3.6学习笔记第一天

    系统环境: win7,python2.7 开发工具:vs2013 cocos版本:cocos2d-x-3.6 暂无模拟手机的环境 新建我的第一个cocos2d项目 1.打开cmd,cd到cocos2d ...

  3. jQuery 父级,祖先,兄弟,等选择性操作

    jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(&q ...

  4. 转载：轻量级浏览器特性检测库：feature.js

    feature.js是一个很简单.快速和轻量级的浏览器特性检测库,它没有任何依赖,体积压缩最后只有1KB,它可以自动初始化,在你需要知道某个特性是否可用时,直接引入即可.以下中文为个人理解. /*! ...

  5. redis RDB快照和AOF日志持久化配置

    Redis持久化配置 Redis的持久化有2种方式   1快照  2是日志 Rdb快照的配置选项: save 900 1      // 900内,有1条写入,则产生快照 save 300 1000 ...

  6. Java解析导入Excel文件后台代码实现

    使用MultipartFile上传Excel文件后端代码实现:(springmvc下的spring-webmvc (MultipartFile )上传) 由于POST一个包含文件上传的Form会以mu ...

  7. Python——Day1（笔记代码）

    #print('Hello World')"""n1=input('请输入用户名:')print(n1)n2=input('请输入密码:')print(n2)" ...

  8. kernel对NTP的API，系统调用函数

    kenrel API for NTP kernel 提供两个API(即系统调用 system call)给应用程序NTP,去校准kernel system clock Kernel Applicati ...

  9. 使用Ansible安装部署nginx+php+mysql之安装php(2)

    二.使用Ansible安装php 1.php.yaml文件内容 - hosts: clong remote_user: root gather_facts: no tasks: # 安装libseli ...

  10. Linux下MATLAB安装及使用

    安装过程 1.在在media目录下创建matlab文件夹,并挂载R2017b_glnxa64_dvd1.iso镜像文件 sudo mkdir /media/matlab sudo mount -t a ...