css3動畫 animation屬性

keyframes具有其自己的語法規則，他的命名是由"@keyframes"開頭，後面緊接著是這個「動畫的名稱」加上一對花括號「{}」，括號中就是一些不同時間段樣式規則，有點像我們css的樣式寫法一樣。對於乙個"@keyframes"中的樣式規則是由多個百分比構成的，如「0%」到"100%"之間，我們可以在這個規則中建立多個百分比，我們分別給每乙個百分比中給需要有動畫效果的元素加上不同的屬性，從而讓元素達到一種在不斷變化的效果，比如說移動，改變元素顏色，位置，大小，形狀等，不過有一點需要注意的是，我們可以使用「from」「to」來代表乙個動畫是從哪開始，到哪結束，也就是說這個 "from"就相當於"0%"而"to"相當於"100%",值得一說的是，其中"0%"不能像別的屬性取值一樣把百分比符號省略，我們在這裡必須加上百分符號（「%」）如果沒有加上的話，我們這個keyframes是無效的，不起任何作用。因為keyframes的單位只接受百分比值。

下面逐一介紹animation動畫的相關屬性:

一、animation-name:

語法：

animation-name: keyframename|none;

取值說明：

animation-name:是用來定義乙個動畫的名稱，其主要有兩個值:keyframename是由keyframes建立的動畫名，換句話說此處的keyframename要和keyframes中的keyframename一致，如果不一致,將不能實現任何動畫效果；none為預設值，當值為none時，將沒有任何動畫效果。另外我們這個屬性跟前面所講的transition一樣，我們可以同時附幾個animation給乙個元素，我們只需要用逗號「，」隔開。

二、animation-duration：

語法：

animation-duration: time;

取值說明：

三、animation-timing-function:

語法：

animation-timing-function: linear|ease|ease-in|ease_out|ease-in-out;

取值說明：

transition-timing-function

一樣，具有以下六種變換方式：ease;ease-in;ease-in-out;linear;cubic-bezier。具體的使用方法大家可以點

這裡，檢視其中transition-timing-function的使用方法。

四、animation-delay:

語法：

animation-delay: time;

取值說明：

animation-delay:是用來指定元素動畫開始時間。取值time為數值，單位為s(秒)，其預設值也是0。這個屬性和transition-delay使用方法是一樣的。

五、animation-iteration-count

語法：

animation-iteration-count: n|infinite;

取值說明：

六、animation-direction

語法：

animation-direction: normal|alternate;

取值說明：

七、animation-play-state

語法：

animation-play-state: paused|running;

取值說明：

實踐展示：

html檔案

css檔案

#con img
@keyframes rotate
to@-webkit-keyframes rotate
to}@-moz-keyframes rotate
to}@-ms-keyframes rotate
to}@-o-keyframes rotate
to}

css3動畫 animation屬性

CSS3 動畫屬性（Animation）

CSS3動畫屬性 animation整理

CSS3中的animation動畫

css3動畫 animation屬性

CSS3 動畫屬性（Animation）

CSS3動畫屬性 animation整理

CSS3中的animation動畫

相關推薦