css3中有三個屬性：transform、transition、animation，一直容易搞混，今天特意拎出來理一理。
transform 能夠對元素進行移動、縮放、轉動、拉長或拉伸。transform 分為2d轉換和3d轉換，由於目前瀏覽器對3d轉換的支援度還不好，所以以下主要講解2d轉換。
rotate(angle) 轉動，引數為角度
scale(x,y) 縮放，引數為倍數
skew(x-angle,y-angle) 傾斜，引數為角度
matrix() 引數為六個值的矩陣，可以描述以上所有轉換，用於複雜的轉換
另外，還有乙個transform-origin屬性，用來改變被轉換元素的位置，一般和rotate()配合使用。
div
該屬性和 :hover 配合使用，實現滑鼠移入動畫效果。
要實現過渡，必須規定兩項內容：
屬性描述
transition
簡寫屬性，在乙個屬性中設定四個過渡屬性。
transition-property
規定應用過渡的 css 屬性的名稱。
transition-duration
定義過渡效果花費的時間。預設是 0。
transition-timing-function
規定過渡效果的時間曲線。預設是 "ease"。
transition-delay
規定過渡效果何時開始。預設是 0。
div
div:hover
@keyframes 規則用於建立動畫。在 @keyframes 中規定某項 css 樣式，就能建立由當前樣式逐漸改為新樣式的動畫效果。
@keyframes myfirst
to }
@-moz-keyframes myfirst /* firefox */
to }
@-webkit-keyframes myfirst /* safari 和 chrome */
to }
@-o-keyframes myfirst /* opera */
to }
@keyframes myfirst
25%
50%
100%
}
通過規定至少以下兩項 css3 動畫屬性，即可將動畫繫結到選擇器：
div
描述@keyframes
規定動畫。
animation
所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。
animation-name
規定 @keyframes 動畫的名稱。
animation-duration
規定動畫完成乙個週期所花費的秒或毫秒。預設是 0。
animation-timing-function
規定動畫的速度曲線。預設是 "ease"。
animation-delay
規定動畫何時開始。預設是 0。
animation-iteration-count
animation-direction
animation-play-state
規定動畫是否正在執行或暫停。預設是 "running"。
animation-fill-mode
規定物件動畫時間之外的狀態。
CSS3轉換 過渡 動畫
transition過渡 animation動畫 順時針旋轉某deg度 負值逆時針 div 根據 x軸 和 y軸 位置給定的引數，從當前元素位置移動。細分 translatex x ranslatey y div div2 元素寬度增加或減少a倍的大小，元素高度增加或減少b倍的大小 細分 scale...
CSS3的過渡 動畫 轉換
特別說明 以下屬性目前都需要加上各瀏覽器廠商字首,瀏覽器 廠商字首 瀏覽器核心 chrome safari webkit blink webkit opera o blink firefox moz gecko ie ms trident 1 過渡 transition property 指定應用過...
css3 轉換 旋轉 過渡 動畫
css3 轉換 旋轉 過渡 動畫 轉換 transform 轉換 translate x,y 位移 translatex 設定水平方向位移 translatey 設定垂直方向位移 旋轉 rotate 旋轉 transform rotate 45deg scale 縮放 transform scale...