定義和用法

animation 屬性是一個簡寫屬性，用於設定六個動畫屬性：

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction

註釋：請始終規定 animation-duration 屬性，否則時長為 0，就不會播放動畫了。

語法

animation: name | duration | timing-function | delay | iteration-count | direction | fill-mode | play-state;

初始值

• animation-name: none
• animation-duration: 0s
• animation-timing-function: ease
• animation-delay: 0s
• animation-iteration-count: 1
• animation-direction: normal
• animation-fill-mode: none
• animation-play-state: running

animation-name屬性

為 @keyframes 動畫指定一個名稱

語法

animation-name: keyframename|none;

為 @keyframes 動畫指定一個名稱：：
animation-name:mymove;
-webkit-animation-name:mymove; /* Safari 和 Chrome */

animation-duration 屬性

定義動畫完成一個週期需要多少秒或毫秒。 語法 animation-duration: time;

div
{
	animation:mymove infinite;
	animation-duration:2s;
	/* Safari and Chrome */
	-webkit-animation:mymove infinite;
	-webkit-animation-duration:2s;
}

@keyframes mymove
{
	from {opacity:1;}
	to {opacity:0;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
	from {opacity:1;}
	to {opacity:0;}
}

animation-timing-function 屬性

animation-timing-function指定動畫將如何完成一個週期。 速度曲線定義動畫從一套 CSS 樣式變為另一套所用的時間。 速度曲線用於使變化更為平滑。

語法

animation-timing-function: value;

從開始到結束以相同的速度播放動畫:
animation-timing-function:linear;
-webkit-animation-timing-function:linear; /* Safari and Chrome */

animation-delay 屬性

animation-delay 屬性定義動畫什麼時候開始。 animation-delay 值單位可以是秒（s）或毫秒（ms）。 提示: 允許負值，-2s 使動畫馬上開始，但跳過 2 秒進入動畫。

等待兩秒，然後開始動畫：
animation-delay:2s;
-webkit-animation-delay:2s; /* Safari 和 Chrome */

animation-iteration-count 屬性 animation-iteration-count屬性定義動畫應該播放多少次。 語法 animation-iteration-count: value; value可取具體數值n，或者infinite（無限次）

播放三次動畫：
animation-iteration-count:3;
-webkit-animation-iteration-count:3; /*Safari and Chrome*/

animation-direction 屬性

animation-direction 屬性定義是否迴圈交替反向播放動畫。 注意：如果動畫被設定為只播放一次，該屬性將不起作用。 CSS 語法 animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit; 屬性值

先執行一遍動畫，然後再反向執行一遍動畫：
animation-direction:alternate;
-webkit-animation-direction:alternate; /* Safari 和 Chrome */

animation-fill-mode 屬性

animation-fill-mode 屬性規定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式。 預設情況下，CSS 動畫在第一個關鍵幀播放完之前不會影響元素，在最後一個關鍵幀完成後停止影響元素。animation-fill-mode 屬性可重寫該行為。

CSS 語法

animation-fill-mode: none|forwards|backwards|both|initial|inherit;

屬性值

把物體動畫地從一個地方移動到另一個地方，並讓它停留在那裡：
animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards; /* Safari 和 Chrome */

語法

animation-play-state: paused|running; paused 指定暫停動畫 running 指定正在執行的動畫

animation-play-state 屬性

animation--play-state屬性指定動畫是否正在執行或已暫停。 注意：在JavaScript中使用此屬性在一個週期中暫停動畫。

暫停動畫：
animation-play-state:paused;
-webkit-animation-play-state:paused; /* Safari 和 Chrome */