CSS3動畫

CSS3 動畫及過渡詳解

今天開始咱們一塊兒來學習有關於CSS3製做動畫的幾個屬性：變形(transform)、過渡(transition)和動畫(animation)等CSS3技術。

　首先咱們先來了解一下變形(transform),transform就是變形，改變的意思。在CSS3中transform主要包括如下幾種：旋轉rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix。下面咱們來看一看它們是如何使用，先從咱們的transform語法開始：

 

　<!--它其中的值爲：旋轉rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix-->
　transform: rotate | scale | skew | translate |matrix |none:表示不進行變換;     
1、旋轉rotate
rotate：經過指定的角度參數對原元素指定一個2D rotation（2D 旋轉），需先有transform-origin屬性的定義。transform-origin定義的是旋轉的基點，其中angle是指旋轉角度，若是設置的值爲正數表示順時針旋轉，若是設置的值爲負數，則表示逆時針旋轉。

例子：rotate(70deg)

　　　　　　　　　　　　　　　　　　　　

2、移動translate

移動translate咱們分爲三種狀況：translate(x,y)水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動）；translateX(x)僅水平方向移動（X軸移動）；translateY(Y)僅垂直方向移動（Y軸移動），具體使用方法以下：

先利用定位top：50%，left：50%，而後經過transform：translate（-50%,-50%）實現居中。

　　　　　　　.h{ width: 500px; height: 500px; background: black; margin: 0 auto; } .h1{ width: 200px; height: 200px; background: white; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); 　 }

3、縮放scale

　縮放scale和移動translate是極其類似，他也具備三種狀況：scale(x,y)使元素水平方向和垂直方向同時縮放（也就是X軸和Y軸同時縮放）；scaleX(x)元素僅水平方向縮放（X軸縮放）；scaleY(y)元素僅垂直方向縮放（Y軸縮放），但它們具備相同的縮放中心點和基數，其中心點就是元素的中心位置，縮放基數爲1，若是其值大於1元素就放大，反之其值小於1，元素縮小。

　　一、scale(<number>[, <number>])：提供執行[sx,sy]縮放矢量的兩個參數指定一個2D scale（2D縮放）。若是第二個參數未提供，則取與第一個參數同樣的值。scale(X,Y)是用於對元素進行縮放，能夠經過transform-origin對元素的基點進行設置，一樣基點在元素中心位置；基中X表示水平方向縮放的倍數，Y表示垂直方向的縮放倍數，而Y是一個可選參數，若是沒有設置Y值，則表示X，Y兩個方向的縮放倍數是同樣的。並以X爲準。經過 scale() 方法，元素的尺寸會增長或減小，根據給定的寬度（X 軸）和高度（Y 軸）參數：

　　值 scale(2,4) 把寬度轉換爲原始尺寸的 2 倍，把高度轉換爲原始高度的 4 倍，默認值是：scale(1，1)

接下來咱們繼續看過渡transtion~

　　W3C標準中對css3的transition這是樣描述的：「css的transition容許css的屬性值在必定的時間區間內平滑地過渡。這種效果能夠在鼠標單擊、得到焦點、被點擊或對元素任何改變中觸發，並圓滑地以動畫效果改變CSS的屬性值。」

　　下面咱們來看看它如何使用：

　　　　transition 屬性是一個簡寫屬性，用於設置四個過渡屬性：

　　　　transition-property：規定設置過渡效果的 CSS 屬性的名稱。

　　　　transition-duration：規定完成過渡效果須要多少秒或毫秒。

　　　　transition-timing-function：規定速度效果的速度曲線。

　　　　transition-delay：定義過渡效果什麼時候開始。

1、transition-property

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

 

2、transition-duration

　　transition-duration是用來規定完成過渡效果須要多少秒或毫秒，單位爲s（秒）或者ms(毫秒)。

 

3、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 函數中定義本身的值。可能的值是 0 至 1 之間的數值。

　　

4、transition-delay

　　transition-delay用來規定在過渡效果開始以前須要等待的時間，以秒或毫秒計。也就是說當改變元素屬性值後多長時間開始執行transition效果。

　

　　注意：具體什麼css屬性能夠實現transition效果，在W3C官網中列出了全部能夠實現transition效果的CSS屬性值以及值的類型，你們能夠點這裏瞭解詳情。這裏須要提醒一點是，並非什麼屬性改變都爲觸發transition動做效果，好比頁面的自適應寬度，當瀏覽器改變寬度時，並不會觸發transition的效果。但上述表格所示的屬性類型改變都會觸發一個transition動做效果，一般咱們使用動畫時最好加上各大瀏覽器的內核，否則有些瀏覽器沒法顯示該動畫：

　　五大瀏覽器的內核：

　　　　一、谷歌：-webkit-或者-blink-

　　　　二、歐朋：-o-

　　　　三、火狐：-moz-

　　　　四、IE    ：-ms-

　　　　五、Safari：-webkit-

　　以上就是咱們的過渡transtion~

 

　　

　　接下來咱們再來看看動畫animation~

　　animation 屬性是一個簡寫屬性，用於設置六個動畫屬性：

• • 　　animation-name
  • 　　animation-duration
  • 　　animation-timing-function
  • 　　animation-delay
  • 　　animation-iteration-count
  • 　　animation-direction

　　一、animation-name：指定@keyframes的名字，CSS加載時會應用該名字的@keyframes規則來實現動畫。

　　二、animation-duration：動畫持續時間，默認是0表示無動畫，單位能夠設s秒或ms毫秒。

　　三、animation-timing-function：動畫播放方式，默認值ease，能夠設linear，ease，ease-in，ease-out，ease-in-out，cubic-bezier(n,n,n,n)，steps。它和transtion中的同樣，詳情請看transtion。

　　四、animation-delay：延遲開始動畫的時間，默認值是0，表示不延遲，當即播放動畫。單位是s秒或ms毫秒。容許設負時間，意思是讓動畫動做從該時間點開始啓動，以前的動畫不顯示。例如-2s 使動畫立刻開始，但前 2 秒的動畫被跳過。

　　五、animation-iteration-count：動畫循環播放的次數，默認值爲1，即放完一遍後不循環播放。除數字外也能夠設關鍵字infinite表示無限循環播放。

　　六、animation-direction：動畫播放的方向，可設normal，alternate，alternate-reverse。默認值是normal表示正常播放動畫。alternate表示輪轉正反向播放動畫，即動畫會在奇數次（1，3，5…）正常播放，而在偶數次（2，4，6…）反向播放。alternate-reverse正好反過來，奇數次反向播動畫，偶數次正向播動畫。

　　七、animation-play-state：動畫的狀態，可設running，paused。默認值running表示正在播放動畫，paused表示暫停動畫。

　　八、@keyframes：規定動畫。Keyframes具備其本身的語法規則，他的命名是由"@keyframes"開頭，後面緊接着是這個「動畫的名稱」加上一對花括號「{}」，括號中就是一些不一樣時間段樣式規則，有點像咱們css的樣式寫法同樣。對於一個"@keyframes"中的樣式規則是由多個百分比構成的，如「0%」到"100%"之間，咱們能夠在這個規則中建立多個百分比，咱們分別給每個百分比中給須要有動畫效果的元素加上不一樣的屬性，從而讓元素達到一種在不斷變化的效果，好比說移動，改變元素顏色，位置，大小，形狀等，不過有一點須要注意的是，咱們可使用「fromt」「to」來表明一個動畫是從哪開始，到哪結束，也就是說這個 "from"就至關於"0%"而"to"至關於"100%",值得一說的是，其中"0%"不能像別的屬性取值同樣把百分比符號省略，咱們在這裏必須加上百分符號（「%」）若是沒有加上的話，咱們這個keyframes是無效的，不起任何做用。由於keyframes的單位只接受百分比值。

　　瀏覽器兼容問題：　　　　

　　Internet Explorer 十、Firefox 以及 Opera 支持 animation 屬性。

　　Safari 和 Chrome 支持替代的 -webkit-animation 屬性。

　　註釋：Internet Explorer 9 以及更早的版本不支持 animation 屬性。

　　CSS3裏三大動畫相關屬性transform，transition，animation基本內容就介紹完了~