最近在网上看到很多代码都通过引入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. dll文件：关于MFC程序不能定位输入点

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

  2. 使用meta实现页面的定时刷新或跳转

    <meta http-equiv="refresh" content="5"> 这个表示当前页面每5秒钟刷一下,刷一下~ <meta http ...

  3. 人工智能 Python 入门视频

    Python, 是一种面向对象.解释型计算机程序设计语言,由Guido van Rossum于1989年发明,第一个公开发行版发行于1991年.       Python是纯粹的自由软件, 源代码和解 ...

  4. CF div2 499 A. Stages

    Code: #include<cstdio> #include<algorithm> #include<iostream> using namespace std; ...

  5. php-fpm优化处理

    php-fpm.conf有两个至关重要的参数:一个是”max_children”,另一个是”request_terminate_timeout”. 我的两个设置的值一个是”40″,一个是”900″,但 ...

  6. 算法61---两个字符串的最小ASCII删除和【动态规划】

    一.题目: 给定两个字符串s1, s2,找到使两个字符串相等所需删除字符的ASCII值的最小和. 示例 1: 输入: s1 = "sea", s2 = "eat" ...

  7. CentOS 笔记（二） 端口占用，进程查看

    ①查看当前端口情况 netstat -nultp ②查看当前进程情况 ps -ef ps -ef|grep dotnet ③强制kill 进程 kill -9 [PIN]

  8. Maven 从安装到环境配置到项目搭建

    maven是基于项目对象模型(pom),可以通过一小段的描述信息来管理项目的构建,报告和文档的软件项目管理工具. Maven是构建项目的管理工具,白话就是说:“Maven的核心功能便是合理叙述项目间的 ...

  9. STM32 ADC多通道转换DMA模式与非DMA模式两种方法（HAL库）

    一.非DMA模式(转) 说明:这个是自己刚做的时候百度出来的,不是我自己做出来的,因为感觉有用就保存下来做学习用,原文链接:https://blog.csdn.net/qq_24815615/arti ...

  10. spring 整合freemarker 实现模板继承

    <!--freemarker 配置--> <bean id="freemarkerConfig" class="org.springframework. ...