作者:
WangMin
格言:努力做好自己喜歡的每一件事
animate.css是什么？
animate.css 是一個有趣，酷炫的，跨瀏覽器的動畫庫，里面包含了許多常用的css動畫。你可以將它用於你的項目中，不管是主頁，滑動切換，又或者是其它方面，你都可以通過它來制作出驚人的效果。
我們要使用的它的話需要把它加到自己的頁面中，接着就可以在需要動畫的元素標簽上直接調用里面的動畫，然后調節動畫次數延遲等達到自己需要的效果就可以了。
怎么獲取 animate.css
1、從官網下載
animate.css 官方下載
2、使用在線cdn
animate.css 在線地址：https://unpkg.com/animate.css@3.5.2/animate.min.css
怎么使用 animate.css
1）引入CSS文件
相信大家對引入外部的CSS樣式文件的代碼以及快捷鍵應該很熟悉，你只需要在HTML文件的head標簽中引入CSS樣式文件，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>animate-test</title>
<link href="css/animate.min.css" type="text/css" rel="stylesheet"/>
</head>
<body>
</body>
</html>
2）輔助類
給你想添加動畫效果的元素添加一個 animated 類（必需）。如果需要動畫循環運動，你還需要給這個元素追加 infinite 類，又或者自己另外定義一個類似於 infinite 的類。
3) 效果添加
接下來就是最后一步了，也是最重要的一步，為元素添加你想要的效果所對應的類名就可以查看效果了。簡單列舉幾個：
bounce 彈跳
flash 閃爍
pulse 放大，縮小
rubberBand 放大，縮小，彈簧
shake 左右晃動
headShake 左右小幅晃動
swing 左右扇形搖擺
tada 放大，左右上下晃動，縮小
wobble 左右小幅(圓點較遠)扇形搖擺
jello 左右左右上下晃動
實例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>animate-test</title>
<link href="css/animate.min.css" type="text/css" rel="stylesheet"/>
<style type="text/css">
.box{
width:200px;
height:200px;
background:#CCCCCC
}
</style>
</head>
<body>
<div class="box animated bounce"></div>
</body>
</html>
具體動畫效果可以自己實際操作，然后運行瀏覽器查看。
下面來詳細介紹animate.css里面的類：
| 類名 | 效果 |
|---|---|
| Attention | 晃動效果 |
| Bounce | 彈性緩沖效果 |
| Fade | 透明度變化效果 |
| Flip | 翻轉效果 |
| Rotate | 旋轉效果 |
| Slide | 滑動效果 |
| Zoom | 變焦效果 |
| Special | 特殊效果 |
還有一些輔助類：
infinite 無限循環
delay-1s，delay-2s，delay-3s，delay-4s，delay-5s 延遲
fast，faster 持續時間：快
slow，slower 持續時間：慢
如果你想要改變動畫效果，可以自定義配置，如下：
//初始，默認
#yourElement{
animate-duration: 1ms !important; //動畫持續時間
transition-duration: 1ms !important;
animate-delay: 0; //動畫延遲時間
animate-iteration-count: 1 !important; //動畫執行次數
}
如果想要動畫不停地執行，可以將animate-iteration-count: infinite ，或者直接在元素上添加類 .infinite 。
另外，還有一種使用方法，那就是通過 jQuery 或者自己定義的 CSS 規則來給目標元素一次性添加對應效果的 class 類。如下：
$('#yourElement').addClass('animated bounceOutLeft');
當然如果不想要元素使用某個動畫效果，也可以通過 jQuery 來刪除相應效果的類就可以了，如下：
$('#yourElement').removeClass('animated bounceOutLeft');
兼容
瀏覽器兼容：當然是只兼容支持 CSS3 animate 屬性的瀏覽器，他們分別是：IE10+、Firefox、Chrome、Opera、Safari。
以上僅是個人見解，若有不足之處歡迎在下方評論指出，那就先分享到這里!! 😄 后續繼續更新!!