animate.css的使用
前面的話
animate.css是一個使用CSS3的animation制作的動畫效果的CSS集合，里面預設了很多種常用的動畫，且使用非常簡單。本文將詳細介紹animate.css的使用
引入
animate.css的最新版本是3.5.2，引入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的使用非常簡單，因為它是把不同的動畫綁定到了不同的類里，所以想要使用哪種動畫，只需要把通用類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 flipInY flipOutX flipOutY
【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="https://unpkg.com/animate.css@3.5.2/animate.min.css">
<style>
.box{height: 100px;width: 100px;background-color: lightblue}
</style>
</head>
<body>
<div class="box animated flash"></div>
</body>
</html>
通過給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>