CSS3 animation屬性

標籤：

CSS3 animation屬性@import @media@font-face@keyframes當我們使用@keyframes定義好了一個動畫，它並不會執行產生任何效果，直到我們通過animation屬性將動畫應用到相應元素上。

對於 CSS3 animation 屬性其完整的文法如下：

animation: name duration timing-function delay iteration-count direction;

• name是使用@keyframes定義好的主要畫面格名稱
• duration從字面意思可知是指定動畫期間
• timing-function 指定動畫以何種方式播放，具體指的是從元素的一個狀態過渡到另一個狀態所使用的方式，可用的值有linear，ease, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n)。每種方式的討論超出了原計劃，這裡只是列出
• delay指定一個延時讓動畫不立即播放
• iteration-count 指定動畫重複次數，可以指定一個數字，也可以使用‘infinite‘表示一直播放
• direction指定動畫是否反向播放或者交替著播放，可用的值有normal, reverse, alternate, alternate-reverse

其中name和duration 是必需的，如果不指定duration預設為0，也就是動畫持續0秒，所以就無法看到動畫效果。

在前面已經定義好了主要畫面格了，現在我們使用animation將其應用到相應元素上。

現在開啟頁面就會看到最上面那個動畫效果了。

使用百分比指定主要畫面格的版本

上面介紹過通過百分比的形象我們可以指定動畫過程中任何時間點時元素的狀態，將上面的版本變為百分比版本是非常容易的事情。

我們只需把主要畫面格的定義由from to 改為想要的時間百分比即可。

比如開始的狀態不改變，增加一個動畫進行到50%時顏色為黃色大小為75X75，最後為綠色大小為100X100。

 

CSS3 animation屬性