CSS3動畫屬性

整理一點css3動畫的設置，用於製作一些好看的動畫。
CSS3有關動畫製作有3個屬性：

1. 2D/3D 轉換屬性（Transform）
2. 過渡屬性（Transition）
3. 動畫屬性（Animation）

2D/3D 轉換屬性（Transform）

transform 屬性向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。

2D轉換
matrix(n,n,n,n,n,n) 定義 2D 轉換，使用六個值的矩陣。
translate(x,y) 定義 2D 轉換，沿着 X 和 Y 軸移動元素。
translateX(n) 定義 2D 轉換，沿着 X 軸移動元素。
translateY(n) 定義 2D 轉換，沿着 Y 軸移動元素。
scale(x,y) 定義 2D 縮放轉換，改變元素的寬度和高度。
scaleX(n) 定義 2D 縮放轉換，改變元素的寬度。
scaleY(n) 定義 2D 縮放轉換，改變元素的高度。
rotate(angle) 定義 2D 旋轉，在參數中規定角度。
skew(x-angle,y-angle) 定義 2D 傾斜轉換，沿着 X 和 Y 軸。
skewX(angle) 定義 2D 傾斜轉換，沿着 X 軸。
skewY(angle) 定義 2D 傾斜轉換，沿着 Y 軸

translate() 方法，元素從其當前位置移動，根據給定的 left（x 座標） 和 top（y 座標） 位置參數：

div{
	transform: translate(50px,100px);
	-ms-transform: translate(50px,100px);		/* IE 9 */
	-webkit-transform: translate(50px,100px);	/* Safari and Chrome */
	-o-transform: translate(50px,100px);		/* Opera */
	-moz-transform: translate(50px,100px);		/* Firefox */
}

rotate() 方法，元素順時針旋轉給定的角度。允許負值，元素將逆時針旋轉。

div{
	transform: rotate(30deg);
	-ms-transform: rotate(30deg);		/* IE 9 */
	-webkit-transform: rotate(30deg);	/* Safari and Chrome */
	-o-transform: rotate(30deg);		/* Opera */
	-moz-transform: rotate(30deg);		/* Firefox */
}

scale() 方法，元素的尺寸會增加或減少，根據給定的寬度（X 軸）和高度（Y 軸）參數（x,y分別擴大的倍數）：

div{
	transform: scale(2,4);
	-ms-transform: scale(2,4);	/* IE 9 */
	-webkit-transform: scale(2,4);	/* Safari 和 Chrome */
	-o-transform: scale(2,4);	/* Opera */
	-moz-transform: scale(2,4);	/* Firefox */
}

skew() 方法，元素翻轉給定的角度，根據給定的水平線（X 軸）和垂直線（Y 軸）參數：

div{
	transform: skew(30deg,20deg);
	-ms-transform: skew(30deg,20deg);	/* IE 9 */
	-webkit-transform: skew(30deg,20deg);	/* Safari and Chrome */
	-o-transform: skew(30deg,20deg);	/* Opera */
	-moz-transform: skew(30deg,20deg);	/* Firefox */
}

matrix() 方法把所有 2D 轉換方法組合在一起。需要六個參數，包含數學函數，允許您：旋轉、縮放、移動以及傾斜元素。

div{
	transform:matrix(0.866,0.5,-0.5,0.866,0,0);
	-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);		/* IE 9 */
	-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);	/* Firefox */
	-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);	/* Safari and Chrome */
	-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);		/* Opera */
}

3D轉換
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) 定義 3D 轉換，使用 16 個值的 4x4 矩陣。
translate3d(x,y,z) 定義 3D 轉化。
translateX(x) 定義 3D 轉化，僅使用用於 X 軸的值。
translateY(y) 定義 3D 轉化，僅使用用於 Y 軸的值。
translateZ(z) 定義 3D 轉化，僅使用用於 Z 軸的值。
scale3d(x,y,z) 定義 3D 縮放轉換。
scaleX(x) 定義 3D 縮放轉換，通過給定一個 X 軸的值。
scaleY(y) 定義 3D 縮放轉換，通過給定一個 Y 軸的值。
scaleZ(z) 定義 3D 縮放轉換，通過給定一個 Z 軸的值。
rotate3d(x,y,z,angle) 定義 3D 旋轉。
rotateX(angle) 定義沿 X 軸的 3D 旋轉。
rotateY(angle) 定義沿 Y 軸的 3D 旋轉。
rotateZ(angle) 定義沿 Z 軸的 3D 旋轉。
perspective(n) 定義 3D 轉換元素的透視視圖。

rotateX() 方法，元素圍繞其 X 軸以給定的度數進行旋轉。

div{
	transform: rotateX(120deg);
	-webkit-transform: rotateX(120deg);	/* Safari 和 Chrome */
	-moz-transform: rotateX(120deg);	/* Firefox */
}

rotateY() 方法，元素圍繞其 Y 軸以給定的度數進行旋轉。

div{
	transform: rotateY(130deg);
	-webkit-transform: rotateY(130deg);	/* Safari 和 Chrome */
	-moz-transform: rotateY(130deg);	/* Firefox */
}

過渡屬性（Transition）

transition 簡寫屬性，用於在一個屬性中設置四個過渡屬性。
transition-property 規定應用過渡的 CSS 屬性的名稱。
transition-duration 定義過渡效果花費的時間。
transition-timing-function 規定過渡效果的時間曲線。
transition-delay 規定過渡效果何時開始。

實例
向寬度、高度和轉換添加過渡效果：

div{
	transition: width 2s, height 2s, transform 2s;
	-moz-transition: width 2s, height 2s, -moz-transform 2s;
	-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
	-o-transition: width 2s, height 2s,-o-transform 2s;
}

動畫屬性（Animation）

/*示例*/
@keyframes testAnimation{
	/*每一階段的狀態*/
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
#elementId{
     /*所有屬性簡寫*/
     /*animation: testAnimation 3s linear 5s infinite normal forwards;*/
     animation-name: testAnimation;
     animation-duration: 3s;
     animation-timing-function: linear;
     animation-delay: 5s;
     animation-iteration-count: infinite;
     animation-direction: normal;
     animation-play-state:running;
     animation-fill-mode:forwards;
}

@keyframes 規定動畫 後跟這個動畫的名稱。
animation 所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。
animation-name 規定 @keyframes 動畫的名稱。
animation-duration 規定動畫完成一個週期所花費的秒或毫秒。
animation-timing-function 規定動畫的速度曲線。
ease | linear | ease-in | ease-out | ease-in-out
animation-delay 規定動畫延時秒或毫秒 。
animation-iteration-count 規定動畫被播放的次數。
infinite（無限次）
animation-direction 規定動畫是否在下一週期逆向地播放。
normal（普通） | reverse（反向） | alternate（先正向，後反向） | alternate-reverse（先反向，後正向）
animation-play-state 規定動畫是否正在運行或暫停。
animation-fill-mode 規定對象動畫時間之外的狀態。
none（無） | forwards（結束幀） | backwards（開始幀） | both（開始幀或結束幀）