前面的話 animate.css是一個使用CSS3的animation製作的動畫效果的CSS集合，裡面預設了很多種常用的動畫，且使用非常簡單。本文將詳細介紹animate.css的使用 引入 animate.css的最新版本是3.5.2，引入animate.css很容易，有以下幾種方法 1、從官網下 ...
前面的話
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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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>
