詳解animate.css動畫外掛用法
阿新 • • 發佈：2018-12-26
animate.css是一個以CSS3的animation製作的一個動畫效果的CSS集合，裡面預設了很多種常用的動畫，且使用非常簡單，本文用來介紹該外掛如何使用。
第一步：
下載animate.css檔案，這個非常容易獲得，就不多說了。
第二步：
在你的HTML頁面中匯入這個檔案，例如：<link rel="stylesheet" href="./animate.min.css">
第三步：給你想要新增的動畫效果的元素設定animate.css已經預定義好的css類
比如：<div class="animated bounceIn">animate.css動畫演示</div>
此後，在瀏覽器中執行該頁面，就能看到這個div做出了bounceIn的動畫效果。
注意事項：
- animated類名，是animate.css外掛的一個基礎類，要做動畫的元素，必須引用這個class名
- 如果想要做無限迴圈的動畫，你可以給class裡引用一個叫做“infinite”的類，元素就會自動的無限迴圈你要做的對應型別的動畫
- 要做動畫的元素必須是塊級元素，否則無法看到動畫效果。比如如果給span標籤新增相應的類，將不會產生動畫效果；假如你要做動畫的元素必須是span標籤，那麼你需要通過display:block，把它設定為塊級元素。
下面給出例項：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="animate.css"> <style> .box{ width: 600px; border: 1px solid #ccc; border-radius: 5px; margin: 100px auto; background-color: #eee; overflow: hidden; } .box ul{ width: 200px; float: left; background-color: #ddd; padding: 0; margin: 0; list-style: none; } .box ul li{ font-size: 16px; padding: 10px; text-align: center; border: 1px solid #999; cursor: pointer; } .box div{ width: 400px; /* height: 100%; */ background-color: #eee; border-radius: 5px; float: left; text-align: center; font-size: 16px; } .box div span{ display: block; background-color: pink; padding: 10px 20px; width: 200px; margin: 100px auto; } </style> </head> <body> <div class="box" id="box"> <ul> <li>flash</li> <li>pulse</li> <li>rubberBand</li> <li>shake</li> <li>headShake</li> <li>swing</li> <li>tada</li> <li>wobble</li> <li>jello</li> </ul> <div> <span class="animated">Hello,animate.css!</span> </div> </div> <!-- <span class="animated zoomIn infinite f">Hello,animate.css!</span> --> <script> var box = document.getElementById('box'); var lis = box.getElementsByTagName('li'); var span = box.getElementsByTagName('span')[0]; for(var i = 0; i < lis.length; i++){ lis[i].onclick = function(){ span.className = 'animated ' + this.innerHTML; console.log(span.className); for(var i = 0; i < lis.length; i++){ lis[i].style.backgroundColor = '#ddd'; lis[i].style.color = '#000'; } this.style.backgroundColor = '#444'; this.style.color = '#eee'; } } </script> </body> </html>