CSS3中的 transform （變形）+Transition(轉換) = animation（動畫）

 transform （變形）

包括：旋轉rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix

transition主要包含五個屬性值：

transform: rotate | scale | skew | translate |matrix;

transform:rotate(45deg);圍繞中心旋轉角度

transform-origin：left top 修改旋轉中心（默認就是中心點） {left top right bottom}

transform:translate(x,y) 位移距離 translateX(x)  translateY(y){三種位移方式}

transform:scale(x,y) 縮放大小 以圖形中心點縮放，經過transform-origin設置以某點縮放  transform:scaleX(x) 水平方向縮放 transform:scaleY(y) 垂直方向縮放

transform:skew(10deg,10deg)  一中心點爲基點扭曲圖像  transform:skewX() 水平方向扭曲      transform:skewY() 垂直方向扭曲

transform:matrix; 矩陣。

transition主要包含四個屬性值：

執行變換的屬性：transition-property；

transition-property是用來指定當元素其中一個屬性改變時執行transition效果，其主要有如下幾個值：none(沒有屬性改變)；all（全部屬性改變）這個也是其默認值；indent（元素屬性名）。當其值爲none時，transition立刻中止執行，當指定爲all時，則元素產生任何屬性值變化時都將執行transition效果，ident是能夠指定元素的某一個屬性值。

變換延續的時間：transition- duration；

transition-duration是用來指定元素 轉換過程的持續時間，取值：<time>爲數值，單位爲s（秒）或者ms(毫秒)

在延續時間段，變換的速率變化transition-timing-function

transition-timing-function有6個可能值：

一、ease：（逐漸變慢）默認值

二、linear：（勻速），linear 函數

三、ease-in：(加速)，ease-in 

四、ease-out：（減速），ease-out 

五、ease-in-out：（加速而後減速），ease-in-out 函數等同於貝塞爾曲線(0.42, 0, 0.58, 1.0)

六、cubic-bezier：（該值容許你去自定義一個時間曲線）貝塞爾曲線。

 

變換延遲時間transition- delay

transition-delay是用來指定一個動畫開始執行的時間，也就是說當改變元素屬性值後多長時間開始執行transition效果

animation主要包含七個屬性值：

animation-name: 動畫名稱；和@keyframes相關聯。

animation-duration：

animation-duration是用來指定元素播放動畫所持續的時間長(這個屬性跟transition中的transition-duration使用方法是同樣的)

animation-timing-function:

animation-timing-function:是指元素根據時間的推動來改變屬性值的變換速率，說得簡單點就是動畫的播放方式。他和transition中的transition-timing-function同樣，具備如下六種變換方式：ease;ease-in;ease-in-out;linear;cubic-bezier。

animation-delay:

animation-delay:是用來指定元素動畫開始時間。這個屬性和transition-delayy使用方法是同樣的。

animation-iteration-count

animation-iteration-count是用來指定元素播放動畫的循環次數，默認值爲「1」；infinite爲無限次數循環。

animation-direction

animation-direction是用來指定元素動畫播放的方向，其只有兩個值，默認值爲normal，若是設置爲normal時，動畫的每次循環都是向前播放；另外一個值是alternate，他的做用是，動畫播放在第偶數次向前播放，第奇數次向反方向播放。

animation-play-state

animation-play-state主要是用來控制元素動畫的播放狀態。其主要有兩個值，running和paused其中running爲默認值。