css3 操作動畫要點

標籤：

CSS3 有3種和動畫相關的屬性：transform, transition, animation。

不同點：

1.  觸發條件不同。transition通常和hover等事件配合使用，由事件觸發。animation則和gif動態圖差不多，立即播放。

2. 迴圈。 animation可以設定迴圈次數。

3. 精確性。 animation可以設定每一幀的樣式和時間。tranistion 只能設定頭尾。 animation中可以設定每一幀需要單獨變化的樣式屬性， transition中所有樣式屬性都要一起變化。

4. 與javascript的互動。animation與js的互動不是很緊密。tranistion和js的結合更強大。js設定要變化的樣式，transition負責動畫效果，天作之合，比之前只能用js時爽太多。

結論：

1. 如果要靈活定製多個幀以及迴圈，用animation.

2. 如果要簡單的from to 效果，用 transition.

3. 如果要使用js靈活設定動畫屬性，用transition.

 

css3 操作動畫要點