用CSS3作動畫- Animate.css

CSS3可以做很多動畫，有空可以來研究看看，最近看到這個，只要引入他的CSS，再動態加到元素裡就可以產生動了，一方面可以輕鬆產生動畫，一方面也可以去看看他的寫法，我想對學習CSS3的動畫是很有幫助的。

首先到這邊下載css
Animate.css
然後引入到文件中，選擇想要的動畫效果，把class加到元素中就可以了，也可以動態把class加到元素中，官網有示範。

view plaincopy to clipboardprint?

1. function testAnim(x) {   
2.     $('#box').removeClass().addClass("animated").addClass(x);   
3.     var wait = window.setTimeout( function(){   
4.     $('#box').removeClass()},   
5.     1300   
6.     );   
7. }    
8.        
9. $('a[data-test]').click(function(){   
10.     var anim = $(this).attr('data-test');   
11.     testAnim(anim);   
12. });   

可以參考網站的寫法，主要是動態加了class後就會有動畫，不過需要做reset的動作才不會怪怪的。

如果覺得網站複雜可以參考我的寫法
Demo