最近在网上看到很多代码都通过引入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. 02--C编程细节整理（一）

    用C语言比较多,这篇是平时攒下的.有些内容在工作后可能会很常见,但是不用容易忘,所以就写篇博客吧. 1.        printf的用法 %*可以用来跳过字符,可以用于未知缩进.像下面一样. for ...

  2. python tips:类与实例的属性问题

    实例是具象化的类,它可以作为类访问所有静态绑定到类上的属性,包括类变量与方法,也可以作为实例访问动态绑定到实例上的属性. 实例1: class A: work = list("hello&q ...

  3. 安装oracle执行runInstaller文件时报错：“……/install/.oui:Permission denied”

    一:问题描述 二:出错原因 将windows下未解压的Oracle安装软件上传到了linux服务器,导致有三个文件的执行权限丢失. 三:解决方法 为其赋予相应权限即可. 1: [root@MyPc ~ ...

  4. IOS - Display a base64 image within a UIImageView： 显示一个base64的图片

    base64字符串(base64String)-存的是image数据NSData* data = [[NSData alloc] initWithBase64EncodedString:base64S ...

  5. Project Euler 42 Coded triangle numbers

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

  6. java自带线程池和队列详细讲解，android中适用

    Java线程池使用说明 一简介 线程的使用在java中占有极其重要的地位,在jdk1.4极其之前的jdk版本中,关于线程池的使用是极其简陋的.在jdk1.5之后这一情况有了很大的改观.Jdk1.5之后 ...

  7. 获取DATA的数据

    num=DataTable("参数名",dtGlobalSheet) 'systemutil.Run "C:\Program Files (x86)\HP\QuickTe ...

  8. $_SERVER 详解

    $_SERVER['HTTP_ACCEPT_LANGUAGE']//浏览器语言 $_SERVER['REMOTE_ADDR'] //当前用户 IP . $_SERVER['REMOTE_HOST'] ...

  9. Arduino基本函数介绍

    转载自http://cnlearn.linksprite.com/?p=5248#.VwZrzvl95hE 数字 I/O (1)pinMode(pin, mode) 数字IO 口输入输出模式定义函数, ...

  10. C#中的Socket

    ];//用于缓存客户端所发送的信息,通过socket传递的信息必须为字节数组 IPEndPoint ipep = new IPEndPoint(IPAddress.Any, 9050);//本机预使用 ...