Animate.css簡(jiǎn)介
animate.css 動(dòng)畫庫(kù)，預(yù)設(shè)了抖動(dòng)（shake）、閃爍（flash）、彈跳（bounce）、翻轉(zhuǎn)（flip）、旋轉(zhuǎn)（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多達(dá) 60 多種動(dòng)畫效果，幾乎包含了所有常見的動(dòng)畫效果。
Animate.css官網(wǎng)
Animate.css安裝
npm install animate.css
Animate模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 引用animate文件 -->
<link rel="stylesheet" href="css/animate.min.css"/>
</head>
<body>
</body>
</html>
- 添加一個(gè)動(dòng)畫
<!-- animated類似與全局變量，定義動(dòng)畫持續(xù)時(shí)間 -->
<!-- bounce具體動(dòng)畫的名稱 -->
<div class="animated bounce">
Animate.css
</div>
- 定義播放次數(shù)
<!-- infinite定義動(dòng)畫無(wú)限播放 -->
<div class="animated bounce infinite">
Animate.css
</div>
- 通過(guò)JavaScript或jQuery添加Animate動(dòng)畫
<div>
Animate.css
</div>
<!-- 在線引用jQuery文件 -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- 通過(guò)jQuery添加animate動(dòng)畫 -->
<script> $('div').addClass('animated bounce'); </script></pre>
- 添加定時(shí)器，5秒后刪除animate無(wú)限播放效果
<div>
Animate.css
</div>
<!-- 在線引用jQuery文件 -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- 通過(guò)JavaScript或jQuery添加animate動(dòng)畫 -->
<script> $('div').addClass('animated bounce infinite');
setTimeout(function(){
$("div").removeClass("infinite");
},5000) </script></pre>
同類型動(dòng)畫庫(kù)推薦
