temp rec min 圖片 state bezier 過渡 順序 位置

我們寫css動畫，必不可少會用到animation跟transform，transition，但是經常搞混使用，傻傻分不清楚 下面來討論討論他們用到的場景跟使用方式 w3c裏transform api如下

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

translate(x, y)方法，根據左(X軸)和頂部(Y軸)位置給定的參數，從當前元素位置移動。x, y的值可以取正負，分別表示表示向不同的方向偏移。

rotate(angle)方法， 表示旋轉angle角度。angle為正時，按順時針角度旋轉，為負值時，元素逆時針旋轉。
scale(x, y)方法，表示元素在x軸和y軸上的縮放比例，參數大於1時，元素放大，小於1時，元素縮小。
skew(x-angle,y-angle)方法，用來對元素進行扭曲變行，第一個參數是水平方向扭曲角度，第二個參數是垂直方向扭曲角度。其中第二個參數是可選參數，如果沒有設置第二個參數，那麽Y軸為0deg

matrix(a,b,c,d,e,f)方法， 以一個含六值的變換矩陣的形式指定一個2D變換， a 水平縮放 , b 水平傾斜, c 垂直傾斜, d 垂直縮放 , e 水平移動, f 垂直移動

一般使用方法

1.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);
}

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

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

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

W3C標準中對css3的transition這是樣描述的：“css的transition允許css的屬性值在一定的時間區間內平滑地過渡。這種效果可以在鼠標單擊、獲得焦點、被點擊或對元素任何改變中觸發，並圓滑地以動畫效果改變CSS的屬性值。” 前提必須有事件觸發

transition屬性的值包括以下四個：

transition-property： 指定對HTML元素的哪個css屬性進行過渡漸變處理，這個屬性可以是color、width、height等各種標準的css屬性。
transition-duration：指定屬性過渡的持續時間
transition-timing-function：指定漸變的速度：
1、ease：（逐漸變慢）默認值，ease函數等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0)；
2、linear：（勻速），linear 函數等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0)；
3、ease-in：(加速)，ease-in 函數等同於貝塞爾曲線(0.42, 0, 1.0, 1.0)；
4、ease-out：（減速），ease-out 函數等同於貝塞爾曲線(0, 0, 0.58, 1.0)；
5、ease-in-out：（加速然後減速），ease-in-out 函數等同於貝塞爾曲線(0.42, 0, 0.58, 1.0)；
6、cubic-bezier：（該值允許你去自定義一個時間曲線）， 特定的cubic-bezier曲線。 (x1, y1, x2, y2)四個值特定於曲線上點P1和點P2。所有值需在[0, 1]區域內，否則無效。
transition-delay：指定延遲時間，也就是經過多長時間才開始執行過渡過程。

例：

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
}

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屬性定義了動畫的播放速度曲線。
與上面相同

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

例：

div {

animation:myfirst 5s linear 2s infinite alternate;

}

@keyframes myfirst /*定義動畫名*/
{
0% {background:red; left:0px; top:0px;} /*定義起始幀樣式，0%可以換成from*/
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;} /*定義結束幀樣式，100%可以換成to*/
}

css：關於transition，transform，animation的特效與動畫