最近在网上看到很多代码都通过引入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. mysqldump+mydumper+xtrabackup备份原理流程

    mysqldump备份原理 备份的基本流程如下: 1.调用FTWRL(flush tables with read lock),全局禁止读写 2.开启快照读,获取此时的快照(仅对innodb表起作用) ...

  2. dll文件：关于MFC程序不能定位输入点

    问题:无法定位程序输入点到动态链接库上...... 过程:找完整个工程文件夹: APS为资源文件: resource.h为定义文件: 完全复制 除主文件以外的所有文件,程序可用: 在主程序框Cpp文件 ...

  3. C++的Matlab接口

    与 原文 过程有些不同,根据具体环境自行配置即可! 转自于:http://blog.csdn.net/left_la/article/details/8206645 我的计算机环境是win7 64位系 ...

  4. Shiro从数据表中初始化资源和权限

    之前在测试的Web工程下,我们在applicationContext.xml中配置了shiroFilter资源拦截器信息: <bean id="shiroFilter" cl ...

  5. Python 3 print 函数用法总结

    Python 3 print 函数用法总结 1. 输出字符串和数字 print("runoob")    # 输出字符串 runoob print(100)            ...

  6. iframe子页面调用父页面js函数

    window.parent.document.getElementById("test").value; jQuery方法为: $(window.parent.document). ...

  7. vc++实例创建简单窗体

    #include<windows.h>#include<stdio.h>LRESULT CALLBACK WinSunProc(HWND hwnd,UINT uMsg,WPAR ...

  8. 这份接口管理平台 eoLinker 开源版的部署指南教程你一定不想错过

    本文主要内容是讲解如何在本地部署eoLinker开源版. 环境要求 1.PHP 5.5+ / PHP7+(推荐) 2.Mysql 5.5+ / Mariadb 5.5+ 3.Nginx(推荐) / A ...

  9. Django的时间字段DateTimeField

    一. Django的时间字段DateTimeField 创建django的model时,有DateTimeField.DateField和TimeField三种类型可以用来创建日期字段,其值分别对应着 ...

  10. Project Euler 42 Coded triangle numbers

    题意:三角形数序列的第n项由公式tn = 1/2n(n+1)给出:因此前十个三角形数是: 1, 3, 6, 10, 15, 21, 28, 36, 45, 55, - 将一个单词的每个字母分别转化为其 ...