CSS3中的动画效果记录
今天要記錄的是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 |
? 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 |
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之后 |
三、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 ] ]*;?
| @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%;} }?一些網上的在線實例：
| 多個3D盒子(滑入/滑出) | 3D菜單 |
| ? |
?
附件下載：
animation.rar
?
參考資料：
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屬性參考 里面有瀏覽器兼容顯示
總結
以上是生活随笔為你收集整理的CSS3中的动画效果记录的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SAS FC 磁盘
- 下一篇： 10个CSS简写/优化技巧