DIV CSS 佈局教程網

在CSS3中，動畫效果使用animation屬性來實現。animation屬性和transition屬性功能是相同的，都是通過改變元素的屬性值來實現動畫效果。但是這兩者又有很大的區別：transition屬性只能通過指定屬性的開始值與結束值，然後在這兩個屬性值之間進行平滑過渡來實現動畫效果，因此只能實現簡單的動畫效果。animation屬性則通過定義多個關鍵幀以及定義每個關鍵幀中元素的屬性值來實現復雜的動畫效果。

想要使用animation屬性實現CSS3動畫的話，需要2步：

• （1）定義動畫；
• （2）調用動畫；

在CSS3中，我們使用@keyframes規則來“定義動畫”。關於“調用動畫”，我們學習了以下屬性：

CSS3動畫屬性 屬性 說明 animation-name 調用動畫 animation-duration 持續時間 animation-timing-function 播放方式 animation-delay 延遲時間 animation-iteration-count 播放次數 animation-direction 播放方向 animation-play-state 播放狀態 animation-fill-mode 時間外屬性