今天要記錄的是CSS3中的三種屬性transform、transition以及animation，這三個屬性大大提升了css處理動畫的能力。
一、Transform 變形
CSS中transform 屬性允許你修改CSS可視化模型的坐標控件。使用transform，元素可以安裝設定的值變形、旋轉、縮放、傾斜。
語法：
transform ： none | <transform-function> [ <transform-function> ]* 也就是： transform: rotate | scale | skew | translate |matrix;
對一個元素進行transform的多種屬性操作，例如rotate、scale、translate三種，以往我們疊加效果都是用逗號（“，”）隔開，但transform中使用多個屬性時卻需要有空格隔開。
在IE9中，使用jQuery動態添加樣式，不顯示效果，其他瀏覽器顯示正常。是因為IE9認為 -ms-transform是無效的腳本，不執行。請將 "-ms-transform"改為“msTransform”。
這里介紹一個在線調試CSS3的工具，http://westciv.com，這個工具還可以調試Gradients、Shadows等屬性。
1、transform-origin屬性
transform的參照點默認為元素的中心點，如果要改變這個參照點，可以是用transform-origin屬性進行自定義。受影響變形函數：rotate()、scale()、skew()、matrix()。語法：
transform-origin: [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ]
2、旋轉rotate
從原點(由transform-origin屬性指定)開始安裝順時針方向旋轉元素一個特定的角度。
| 旋轉30度，transform-origin為默認值 | 旋轉30度，transform-origin為left，top |
 |
 |
.rotate{ -webkit-transform:rotate(30deg); -moz-transform:rotate(30deg); -o-transform:rotate(30deg); -ms-transform:rotate(30deg); transform:rotate(30deg); } .transform_left_top{ -webkit-transform-origin:left top; -moz-transform-origin:left top; -o-transform-origin:left top; -ms-transform-origin:left top; transform-origin:left top; }
3、移動translate
移動translate我們分為三種情況：translate(x,y)水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動）；
translateX(x)僅水平方向移動（X軸移動）；translateY(Y)僅垂直方向移動（Y軸移動）。X或Y取值百分比的時候，相對於自身的寬與高。
| x軸移動50px，y軸移動20px transform-origin為默認值 |
x軸移動50px，y軸移動20px transform-origin為left，top |
 |
 |
設置transform-origin與不設置不影響移動。
.translate{ -webkit-transform:translate(50px,20px); -moz-transform:translate(50px,20px); -o-transform:translate(50px,20px); -ms-transform:translate(50px,20px); transform:translate(50px,20px); }
4、縮放scale
縮放scale和移動translate是極其相似，他也具有三種情況：scale(x,y)使元素水平方向和垂直方向同時縮放（也就是X軸和Y軸同時縮放）；scaleX(x)元素僅水平方向縮放（X軸縮放）；scaleY(y)元素僅垂直方向縮放（Y軸縮放），但它們具有相同的縮放中心點和基數，其中心點就是元素的中心位置，縮放基數為1，如果其值大於1元素就放大，反之其值小於1，元素縮小。
| scale(1.5,1) transform-origin為默認值 |
scale(1.5,1) transform-origin為left，top |
 |
 |
.scale{ -webkit-transform:scale(1.5,1); -moz-transform:scale(1.5,1); -o-transform:scale(1.5,1); -ms-transform:scale(1.5,1); transform:scale(1.5,1); }
5、扭曲skew
扭曲skew和translate、scale一樣同樣具有三種情況：skew(x,y)使元素在水平和垂直方向同時扭曲（X軸和Y軸同時按一定的角度值進行扭曲變形）；skewX(x)僅使元素在水平方向扭曲變形（X軸扭曲變形）；skewY(y)僅使元素在垂直方向扭曲變形（Y軸扭曲變形）
| skew(30deg, 10deg) transform-origin為默認值 |
skew(30deg, 10deg) transform-origin為left，top |
 |
 |
.skew{ -webkit-transform:skew(30deg, 10deg); -moz-transform:skew(30deg, 10deg); -o-transform:skew(30deg, 10deg); -ms-transform:skew(30deg, 10deg); transform:skew(30deg, 10deg); }
6、矩陣matrix
matrix(<number>, <number>, <number>, <number>, <number>, <number>) ： 以一個含六值的(a,b,c,d,e,f)變換矩陣的形式指定一個2D變換，相當於直接應用一個[a b c d e f]變換矩陣。就是基於水平方向（X軸）和垂直方向（Y軸）重新定位元素,此屬性值使用涉及到數學中的矩陣，matrix矩陣是transform變換的基礎，可以應付很多高端的效果，算是一種高級應用技巧。網上有專門介紹這個的用法，我這里就不詳細介紹了。有個在線編輯matrix的網站，useragentman.com。可以在線調試，下圖所示：
w3school在線測試：
| 值 | 描述 | 測試 |
|---|---|---|
| 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 轉換元素定義透視視圖。 |
二、Transition過渡
W3C標准中對css3的transition這是樣描述的：“css的transition允許css的屬性值在一定的時間區間內平滑地過渡。這種效果可以在鼠標單擊、獲得焦點、被點擊或對元素任何改變中觸發，並圓滑地以動畫效果改變CSS的屬性值。”
語法：
transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [ <'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> ] ]*
| 屬性 | 說明 |
| transition-property |
規定設置過渡效果的 CSS 屬性的名稱。 |
| transition-duration |
規定完成過渡效果需要多少秒或毫秒。 |
| transition-timing-function |
規定速度效果的速度曲線。 |
| transition-delay |
定義過渡效果何時開始。 |
1、transition-property
transition-property是用來指定當元素其中一個屬性改變時執行transition效果，其主要有以下幾個值：none(沒有屬性改變)；all（所有屬性改變）這個也是其默認值；indent（元素屬性名）。當其值為none時，transition馬上停止執行，當指定為all時，則元素產生任何屬性值變化時都將執行transition效果，ident是可以指定元素的某一個屬性值。在W3C官網中列出了所有可以實現transition效果的CSS屬性值以及值的類型，大家可以點這里了解詳情。
2、transition-duration
transition-duration是用來指定元素 轉換過程的持續時間，取值：<time>為數值，單位為s（秒）或者ms(毫秒),可以作用於所有元素，包括:before和:after偽元素。其默認值是0，也就是變換時是即時的。
3、transition-timing-function
transition-timing-function的值允許你根據時間的推進去改變屬性值的變換速率，transition-timing-function有6個可能值：
| ease |
（逐漸變慢）默認值，ease函數等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0) |
| linear |
（勻速），linear 函數等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0) |
| ease-in |
（加速），ease-in 函數等同於貝塞爾曲線(0.42, 0, 1.0, 1.0) |
| ease-out |
（減速），ease-out 函數等同於貝塞爾曲線(0, 0, 0.58, 1.0) |
| ease-in-out |
（加速然后減速），ease-in-out 函數等同於貝塞爾曲線(0.42, 0, 0.58, 1.0) |
| cubic-bezier |
（該值允許你去自定義一個時間曲線）可以使用工具網站來定制 |
cubic-bezier為通過貝賽爾曲線來計算“轉換”過程中的屬性值，如下曲線所示，通過改變P1(x1, y1)和P2(x2, y2)的坐標可以改變整個過程的Output Percentage。初始默認值為default
其他幾個屬性的示意圖：
4、transition-delay
transition-delay是用來指定一個動畫開始執行的時間，也就是說當改變元素屬性值后多長時間開始執行transition效果，其取值：<time>為數值，單位為s（秒）或者ms(毫秒)，其使用和transition-duration極其相似，也可以作用於所有元素，包括:before和:after偽元素。 默認大小是"0"，也就是變換立即執行，沒有延遲。
下面做個簡單事例，在移到方塊的時候，將方塊的width增加
| :hover之前 | :hover之后 |
 |
 |
.a_border{ display:block; width:80px; background:#e0e0e0; text-align:center; line-height:80px } a.a_border:hover{ width:150px; -webkit-transition:width 0.5s linear 1s; -moz-transition:width 0.5s linear 1s; -o-transition:width 0.5s linear 1s; -ms-transition:width 0.5s linear 1s; transition:width 0.5s linear 1s; }
三、Animation動畫
通過 CSS3，我們能夠創建動畫，這可以在許多網頁中取代動畫圖片、Flash 動畫以及 JavaScript。CSS3的Animation是由“keyframes”這個屬性來實現動畫效果，Keyframes可以指定任何順序排列來決定Animation動畫變化的關鍵位置。可以在這個Tencent網站上面做在線的動畫調試。
各自的語法：
animation：<single-animation-name> || <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode>
keyframes-rule: '@keyframes' IDENT '{' keyframes-blocks '}';
keyframes-blocks: [ keyframe-selectors block ]* ;
keyframe-selectors: [ 'from' | 'to' | PERCENTAGE ] [ ',' [ 'from' | 'to' | PERCENTAGE ] ]*;
| 屬性 | 描述 | CSS |
|---|---|---|
| @keyframes | 規定動畫。 | 3 |
| animation | 所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。 | 3 |
| animation-name | 規定 @keyframes 動畫的名稱。 | 3 |
| animation-duration | 規定動畫完成一個周期所花費的秒或毫秒。默認是 0，意味着沒有動畫效果。 | 3 |
| animation-timing-function | 規定動畫的速度曲線。默認是 "ease"。 還有linear、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n) |
3 |
| animation-delay | 規定動畫何時開始。默認是 0。 | 3 |
| animation-iteration-count | 規定動畫被播放的次數。默認是 1。下面是其他值： "infinite"：規定動畫應該無限次播放 |
3 |
| animation-direction | 規定動畫是否在下一周期逆向地播放。默認是 "normal"。下面是其他值： "alternate"：動畫應該輪流反向播放 "reverse"：動畫反向運行,方向始終與normal相反。（FF14.0.1以下不支持） "alternate"：動畫會循環正反方向交替運動，奇數次（1、3、5……）會正常運動，偶數次（2、4、6……）會反向運動，即所有相關聯的值都會反向。 "alternate-reverse"：動畫從反向開始，再正反方向交替運動，運動方向始終與alternate定義的相反。（FF14.0.1以下不支持） |
3 |
| animation-play-state | 規定動畫是否正在運行或暫停。默認是 "running" "paused"是指規定動畫已暫停 |
3 |
| animation-fill-mode | 規定對象動畫時間之外的狀態。 "forwards"指當動畫完成后，保持最后一個屬性值（在最后一個關鍵幀中定義） "backwards"指在 animation-delay 所指定的一段時間內，在動畫顯示之前，應用開始屬性值（在第一個關鍵幀中定義） "both"同時配置了forwards和backwards。在動畫顯示之前，應用第一幀；動畫結束時，應用最后一幀 |
3 |
看一個實例：
這句話I am moving將會在左右來回移動，並且在執行到一半的時候字體放大。
.animation1{ -moz-animation-duration: 3s; -moz-animation-name: slidein; -moz-animation-iteration-count: infinite; -moz-animation-direction: alternate; -webkit-animation-duration: 3s; -webkit-animation-name: slidein; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -o-animation-duration: 3s; -o-animation-name: slidein; -o-animation-iteration-count: infinite; -o-animation-direction: alternate; -ms-animation-duration: 3s; -ms-animation-name: slidein; -ms-animation-iteration-count: infinite; -ms-animation-direction: alternate; animation-duration: 3s; animation-name: slidein; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes slidein { from {margin-left:100%;width:300%} 50% {font-size: 300%;margin-left: 25%;width: 150%;} to {margin-left:0%;width:100%;} } @-moz-keyframes slidein { from {margin-left:100%;width:300%} 50% {font-size: 300%;margin-left: 25%;width: 150%;} to {margin-left:0%;width:100%;} } @-webkit-keyframes slidein { from {margin-left:100%;width:300%} 50% {font-size: 300%;margin-left: 25%;width: 150%;} to {margin-left:0%;width:100%;} } @-o-keyframes slidein { from {margin-left:100%;width:300%} 50% {font-size: 300%;margin-left: 25%;width: 150%;} to {margin-left:0%;width:100%;} @-ms-keyframes slidein { from {margin-left:100%;width:300%} 50% {font-size: 300%;margin-left: 25%;width: 150%;} to {margin-left:0%;width:100%;} }
一些網上的在線實例：
| |
附件下載：
參考資料：
http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html CSS動畫簡介
http://www.w3cplus.com/content/css3-animation CSS3 Animation
http://www.w3cplus.com/content/css3-transform CSS3 Transform
http://www.w3cplus.com/content/css3-transition CSS3 Transition
http://www.w3school.com.cn/cssref/pr_transition.asp CSS3 transition屬性
http://www.w3school.com.cn/cssref/pr_transform.asp CSS3 transform屬性
http://ecd.tencent.com/css3/guide.html 動畫手冊
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference CSS屬性參考 里面有瀏覽器兼容顯示