Animate.css簡介
animate.css 動畫庫，預設了抖動（shake）、閃爍（flash）、彈跳（bounce）、翻轉（flip）、旋轉（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多達 60 多種動畫效果，幾乎包含了所有常見的動畫效果。
Animate.css下載
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>
- 添加一個動畫
<!-- animated類似與全局變量，定義動畫持續時間 --> <!-- bounce具體動畫的名稱 --> <div class="animated bounce"> Animate.css </div>
- 定義播放次數
<!-- infinite定義動畫無限播放 --> <div class="animated bounce infinite"> Animate.css </div>
- 通過JavaScript或jQuery添加Animate動畫
<div> Animate.css </div> <!-- 在線引用jQuery文件 --> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <!-- 通過jQuery添加animate動畫 --> <script> $('div').addClass('animated bounce'); </script>
- 添加定時器，5秒后刪除animate無限播放效果
<div> Animate.css </div> <!-- 在線引用jQuery文件 --> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <!-- 通過JavaScript或jQuery添加animate動畫 --> <script> $('div').addClass('animated bounce infinite'); setTimeout(function(){ $("div").removeClass("infinite"); },5000) </script>