2012年9月4日 星期二

用CSS3作動畫- Animate.css

318454_4421003413018_308042970_n

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

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

  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

反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...