font none infinite -o 播放 事件觸發 延遲 number spa

transform: w3c

none	定義不進行轉換。	測試
matrix(n,n,n,n,n,n)	定義 2D 轉換，使用六個值的矩陣。	測試
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定義 3D 轉換，使用 16 個值的 4x4 矩陣。
translate(x,y)	定義 2D 轉換。	測試
translate3d(x,y,z)	定義 3D 轉換。
translateX(x)	定義轉換，只是用 X 軸的值。	測試
translateY(y)	定義轉換，只是用 Y 軸的值。	測試
translateZ(z )	定義 3D 轉換，只是用 Z 軸的值。
scale(x,y)	定義 2D 縮放轉換。	測試
scale3d(x,y,z)	定義 3D 縮放轉換。
scaleX(x)	通過設置 X 軸的值來定義縮放轉換。	測試
scaleY(y)	通過設置 Y 軸的值來定義縮放轉換。	測試
scaleZ(z)	通過設置 Z 軸的值來定義 3D 縮放轉換。
rotate(angle)	定義 2D 旋轉，在參數中規定角度。	測試
rotate3d(x,y,z,angle)	定義 3D 旋轉。
rotateX(angle)	定義沿著 X 軸的 3D 旋轉。	測試
rotateY(angle)	定義沿著 Y 軸的 3D 旋轉。	測試
rotateZ(angle)	定義沿著 Z 軸的 3D 旋轉。	測試
skew(x-angle,y-angle)	定義沿著 X 和 Y 軸的 2D 傾斜轉換。	測試
skewX(angle)	定義沿著 X 軸的 2D 傾斜轉換。	測試
skewY(angle)	定義沿著 Y 軸的 2D 傾斜轉換。	測試
perspective(n)	為 3D 轉換元素定義透視視圖。	測試

1. transition： width 2s ease 2s； // property duration timimgfunction delay；過渡、、

div {
    width:100px;
    height:100px;
    background: #000;

}
div:hover {
    width:200px;
    transition: width 2s ease-in-out 1s;//fread
}

2.transform：translate(50px, 30px) 根據給定的 left（x 坐標） 和 top（y 坐標）

div:hover {
    width:200px;
    transform: translate(50px, 30px);
    -webkit-transform: translate(50px, 30px);
    -o--transform: translate(50px, 30px);
    -mz-transform: translate(50px, 30px);
    -ms-transform: translate(50px, 30px);
}

3.transform: rotate(20deg); 旋轉20度 4.transform: scale(1.5, 0.8); /*寬度變為原來的1.5倍，高度變為原來的0.8倍*/

div:hover {
    transform: scale(1.2, 0.8);


動畫

transition 與 animiation transition 必須靠事件觸發，可以是hover animation

簡寫屬性形式:

animation:
[animation-name] [animation-duration] // 動畫的名稱、持續時間
[animation-timing-function][animation-delay] // 關於時間的函數(properties/t)、延遲時間
[animation-iteration-count] [animation-direction] // 播放次數、播放順序
[animation-fill-mode] [animation-play-state]; // 播放前或停止後設置相應樣式、控制動畫運行或暫停

1.animation-timing-function屬性定義了動畫的播放速度曲線。
可選配置參數為:
ease、
ease-in、
ease-out、
ease-in-out、
linear、
cubic-bezier(number, number, number, number)

2.動畫方向（animation-direction）

animation-direction屬性表示CSS動畫是否反向播放。
可選配置參數為:

single-animation-direction = normal | reverse | alternate交替播放 | alternate-reverse

3.動畫叠代次數（animation-iteration-count）

animation-iteration-count該屬性就是定義我們的動畫播放的次數。次數可以是1次或者無限循環。
默認值只播放一次。

single-animation-iteration-count = infinite | number

4.動畫填充模式（animation-fill-mode） animation-fill-mode是指給定動畫播放前後應用元素的樣式。 single-animation-fill-mode = none | forwards | backwards | both

5.動畫播放狀態（animation-timing-function）

animation-play-state: 定義動畫是否運行或者暫停。可以確定查詢它來確定動畫是否運行。
默認值為running

single-animation-timing-function = running | paused

css：關於transform特效與動畫