animate.css是一个使用CSS3的animation制作的动画效果的CSS集合，里面预设了很多种常用的动画，且使用非常简单。
获取地址：
animate.css的最新版本是v4.1.1，引入animate.css很容易，有以下几种方法
1、从GitHub下载
https://github.com/animate-css/animate.css
2、用npm安装:
$ npm install animate.css --save3、用Yarn安装:
$ yarn add animate.css4、使用在线CDN
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>释义及演示
animate.css的使用非常简单，因为它是把不同的动画绑定到了不同的类里，所以想要使用哪种动画，只需要把通用类animated和相应的类添加到元素上就可以。
animate.css里面的类，主要包括Attention(晃动效果)、bounce(弹性缓冲效果)、fade(透明度变化效果)、flip(翻转效果)、rotate(旋转效果)、slide(滑动效果)、zoom(变焦效果)、special(特殊效果)这8类。
【Attention(晃动效果)】
bounce #弹跳
flash #闪动
pulse #脉冲
rubberBand #类橡皮筋拉伸抖动
shake #迅速抖动
headShake#抖动
swing #摇动
tada #摆动
wobble #摇晃
jello #两边上下摆动
以在div上使用bounce为例
<div class="animated bounce"></div>
【bounce(弹性缓冲效果)】
bounceIn #弹跳进入 bounceInDown #从上方弹入 bounceInLeft #从左方弹入 bounceInRight #从右方弹入 bounceInUp #从下方弹入 bounceOut #弹出 bounceOutDown #从上方弹出 bounceOutLeft #从左方弹出 bounceOutRight #从右方弹出 bounceOutUp #从下方弹出
【fade(透明度变化效果)】
fadeIn #淡入 fadeInDown #从上方淡入 fadeInDownBig #从整个屏幕上方淡入 fadeInLeft #从左方淡入 fadeInLeftBig #从整个屏幕左方淡入 fadeInRight #从右方淡入 fadeInRightBig #从整个屏幕右方淡入 fadeInUp #从下方淡入 fadeInUpBig #从整个屏幕下方淡入 fadeOut #淡出 fadeOutDown #从上方淡出 fadeOutDownBig #从整个屏幕的上方淡出 fadeOutLeft #从左方淡出 fadeOutLeftBig #从整个屏幕的左方淡出 fadeOutRight #从右方淡出 fadeOutRightBig #从整个屏幕的右方淡出 fadeOutUp #从下方淡出 fadeOutUpBig #从整个屏幕的下方淡出
【flip(翻转效果)】
flip #翻转 flipInX #沿X轴翻入 flipInY #沿Y轴翻入 flipOutX #沿X轴翻出 flipOutY #沿Y轴翻出
【rotate(旋转效果)】
rotateIn #旋转 rotateInDownLeft #从左上边转入 rotateInDownRight #从右上边转入 rotateInUpLeft #从左下转入 rotateInUpRight #从右上转入 rotateOut #转出 rotateOutDownLeft #从左上边转出 rotateOutDownRight #从右上边转出 rotateOutUpLeft #从左下边转出 rotateOutUpRight #从右下边转出
【slide(滑动效果)】
slideInDown #从上方划入
slideInLeft #从左方划入
slideInRight #从右方划入
slideInUp #从下方划入
slideOutDown #从上方划出
slideOutLeft #从左方划出
slideOutRight #从右方划出
slideOutUp #从下方划出
【zoom(变焦效果)】
zoomIn #放大 zoomInDown #从上方进入放大 zoomInLeft #从左方进入放大 zoomInRight #从右方进入放大 zoomInUp #从下方进入放大 zoomOut #缩小 zoomOutDown #从上方进入缩小 zoomOutLeft #从左方进入缩小 zoomOutRight #从右方进入缩小 zoomOutUp #从下方进入缩小
【special(特殊效果)】
hinge #掉落 rollIn #滚入 rollOut #滚出 lightSpeedIn #光速进入 lightSpeedOut #光速出去
示例说明：
在使用中，可直接在元素上添加animated和对应的类名即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css\animate.css">
<style>
.box{height: 100px;width: 100px;background-color: lightblue}
</style>
</head>
<body>
<div class="box animated flash"></div>
</body>
</html>
通过给JS添加或删除class，可以实现动态效果
<pre><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css\animate.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="css\animate.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>
好记性，不如烂笔头，虽然不用笔，一直记录，总有用的时候，感谢小火柴的蓝色理想-博客园的分享。
本文地址：https://8ik.cn/archives/257
关注我们：请关注一下我们的微信公众号：扫描二维码
，公众号：Hey_MrBoss
温馨提示：文章内容系作者个人观点，不代表捌佰科对观点赞同或支持。
版权声明：本文为转载文章，来源于 小火柴的蓝色理想 - 博客园 ，版权归原作者所有，欢迎分享本文，转载请保留出处！
关注我们：请关注一下我们的微信公众号：扫描二维码
，公众号：Hey_MrBoss温馨提示：文章内容系作者个人观点，不代表捌佰科对观点赞同或支持。
版权声明：本文为转载文章，来源于 小火柴的蓝色理想 - 博客园 ，版权归原作者所有，欢迎分享本文，转载请保留出处！
