Animation（動畫）

人類具有視覺暫留的特性，人的眼睛在看到一幅畫或一個物體後，在0.34秒內不會消失。

動畫原理： 通過把人物的表情、動作、變化等分解後畫成許多動作瞬間的畫幅，利用視覺暫留的原理，在一幅畫還沒有消失前，播放下一幅畫。就會給人造成一種流暢的視覺變化效果。

css3動畫 使元素從一種樣式逐漸變化為另一種樣式的效果 animation屬性是一個簡寫屬性形式: （可以用來描述可動畫的屬性）

簡寫屬性animation
animation：
	animation-name
	animation-duration
	animation-timing-function
	animation-delay
	animation-iteration-count
	animation-direction
	animation-fill-mode
	animation-play-state

在每個動畫定義中，順序很重要：
可以被解析為 <time>的第一個值被分配給animation-duration, 
第二個分配給 animation-delay。
 

關鍵幀（@keyframes）

語法：
@keyframes animiationName{
	keyframes-selector{
		css-style;
	}
}

animiationName:必寫項，定義動畫的名稱
keyframes-selector：必寫項，動畫持續時間的百分比

	from：0%
	to：100%
	css-style：css宣告

animation-name

指定應用的一系列動畫，每個名稱代表一個由@keyframes定義的動畫序列

值:
	none
		特殊關鍵字，表示無關鍵幀。
	keyframename
		標識動畫的字串

animation-duration

指定一個動畫週期的時長。

預設值為0s，表示無動畫。
 
值:
	一個動畫週期的時長，單位為秒(s)或者毫秒(ms)，**無單位值無效**。<br>
	注意：負值無效，瀏覽器會忽略該宣告，但是一些早起的帶字首的宣告會將負值當作0s

animation-timing-function

定義CSS動畫在每一動畫週期中執行的節奏。 

對於關鍵幀動畫來說，timing function作用於一個關鍵幀週期而非整個動畫週期，即從關鍵幀開始，到關鍵幀結束。
 
動畫的預設效果：由慢變快再變慢

值：
linear:線性過渡，等同於貝塞爾曲線（0,0,1,1）
ease:平滑過渡，等同於貝塞爾曲線（0.25,0.1,0.25,1.0）
ease-in:由慢到快，等同於貝塞爾曲線（0.42,0,1,1）
ease-out:由快到慢，等同於貝塞爾曲線（0,0,0.58,1）
ease-in-out:由慢到快再到慢，等同於貝塞爾曲線（0.42,0,0.58,1）
cubic-bezier(1,1,2,3)
 
steps(n,[start|end]) 
	傳入一到兩個引數，第一個引數意思是把動畫分成 n 等分，然後動畫就會平均地執行。
	第二個引數 start 表示從動畫的開頭開始執行，相反，end 就表示從動畫的結尾開始執行，
	預設值為 end。
 

animation-delay

定義動畫開始前等待的時間,以秒或毫秒計(屬於動畫外的範疇)
 
值:<time>
	從動畫樣式應用到元素上到元素開始執行動畫的時間差。
	該值可用單位為秒(s)和毫秒(m   s)。**如果未設定單位，定義無效**

animation-iteration-count

定義動畫執行的次數（屬於動畫內的範疇）

值:
	infinite
		無限迴圈播放動畫.
	<number>
		動畫播放的次數 不可為負值. 

animation-direction

定義動畫執行的方向

值:
normal
	每個迴圈內動畫向前迴圈，換言之，每個動畫迴圈結束，
	動畫重置到起點重新開始，這是預設屬性。
alternate
	動畫交替反向執行，反向執行時，動畫按步後退，
	同時，帶時間功能的函式也反向，比如，ease-in 在反向時成為ease-out。
	計數取決於開始時是奇數迭代還是偶數迭       代
reverse
	反向執行動畫，每週期結束動畫由尾到頭執行。
alternate-reverse
	反向交替， 反向開始交替

animation-fill-mode

屬於動畫外的範疇，定義動畫在動畫外的狀態
animation-fill-mode: none || backwards || forwards || both

管理所有動畫外的狀態！

什麼是動畫外的狀態
	from之前
		animation-delay
	to之後

值:
	none		: 動畫外的狀態保持在動畫之前的位置
	backwards	：from之前的狀態與from的狀態保持一致
	forwards	：to之後的狀態與to的狀態保持一致
	both		：動畫外的狀態與from和to的狀態保持一致

animation-play-state

定義了動畫執行的執行和暫停

值
	running
		當前動畫正在執行。
	paused
		當前動畫以被停止。