CSS制作動畫的屬性有哪些

這篇文章給大家分享的是有關CSS制作動畫的屬性有哪些的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

　　一：transition

　　transition允許我們在CSS屬性變化時給它添加一個過度的動畫效果。通常情況下，CSS屬性變化是立即生效的，新的屬性值在超級短的時間內替換掉舊的屬性值，然后瀏覽器重新繪制樣式內容（可能是reflow或者repaint）。大部分情況下會感覺樣式變化突兀，而transition則可以添加順滑的一個變化效果。例如：

　　.content{

　　background:magenta;

　　transition:background200msease-in50ms;

　　}

　　.content:hover{

　　background:yellow;

　　transition:background200msease-out50ms;

　　}

　　transition的兼容性，不算差，基本上移動設備都可以使用了，并且能做到漸進增強，支持的便有過渡效果，不支持的便是直接切換，所以可以放心使用。

　　transition屬性

　　CSS的transition有四個屬性：

　　transition-delay延遲多久后開始動畫

　　transition-duration過渡動畫的一個持續時間

　　transition-property執行動畫對應的屬性，例如color，background等，可以使用all來指定所有的屬性

　　transition-timing-function隨著時間推進，動畫變化軌跡的計算方式，常見的有：linear，ease，ease-in，ease-out，cubic-bezier(...)等。

　　這四個屬性可以簡寫成為：

　　.class{

　　transition:}

　　例如前邊的那個例子，當.content元素hover時，50毫秒后背景顏色從magenta漸變到yellow，持續時間200毫秒，使用的是ease-out的算法。留意下：transition生效的是對應的選擇器的屬性，例如.content:hover中的transition便是從.content的magenta到yellow過渡效果的控制，而.content中的transition則是控制不hover時，背景顏色從yellow到magenta的變化過程。

　　all這個屬性值是這樣的，它對應選擇器下的元素的所有CSS屬性生效，無論在哪里聲明的CSS規則，并不局限于在同個代碼塊下。

　　如果需要不同屬性對應不同的效果，可以這么來寫：

　　.demo{

　　transition-property:all,border-radius,opacity;

　　transition-duration:1s,2s,3s;

　　/*當這樣使用時，確保all在第一個，因為如果all在后邊的話，它的規則會覆蓋掉前邊的屬性*/

　　}

　　transition的none屬性較少用到，一般用于移除原本有的動畫效果。none沒法和逗號一起使用來移除特定屬性的動畫效果，只能直接干掉transition，如果要移除特定的屬性效果，可以重寫transition而不把要移除的屬性寫進去，或者比較trick的做法是設置duration為0。

　　并不是所有的CSS屬性都是可以添加transition效果的。詳細可以參考文檔：animatableproperties?？赡芙洺Ｓ龅降木褪莇isplay這個屬性并不能添加transition效果，你可以考慮使用visibility或者后邊會提及的animation。

　　關于transition-timing-function的各個算法的一個變化曲線是怎么樣的，我們可以使用chrome的開發者工具來看一下，CSS中你編寫了對應的transition后，把鼠標移到transition-timing-function的那個值前邊，如下圖：

　　3.jpg

　　這樣你便可以很清晰地看到這個算法的一個變化軌跡是怎么用的，然后選擇符合自己需要的一個算法。

　　transition相關的事件

　　transitionend事件會在transition動畫結束的時候觸發。通常我們會在動畫結束后執行一些方法，例如繼續下一個動畫效果或者其他。Zepto.js中的動畫方法都是使用CSS動畫屬性來處理，而其中動畫運行后的回調便應該是使用這個事件來處理。

　　transitionend事件觸發時會傳入一些動畫相關的參數，例如：propertyName，elapsedTime，詳細內容可以參考：transitionend。

　　transition應用

　　transition在很多UI框架中是很常見的屬性，當我們開發一個交互效果的時候，從某個狀態到達另外一個狀態時，transition可以使得這個過程變得更加舒適和順滑。例如上邊的hover時的背景顏色的切換，控制元素的顯示和隱藏時使用opacity來實現漸隱漸現。

　　當transition配合上transform提供的多樣化的元素變化能力后，便可以繪制出很多有趣的交互漸變效果了。最近使用過程中做的一個簡單效果的例子，點擊查看。

　　很常見還有表單input報錯時邊框變紅，按鈕hover時背景漸變等，很多的CSS交互效果會因為transition變得更加自然。

　　二：animation

　　雖然transition已經提供了很棒的動畫效果了，但是我們只能夠控制從一個狀態到達另外一個狀態，沒法來控制多個狀態的不斷變化，而animation而幫助我們實現了這一點。使用animation的前提是我們需要先使用@keyframes來定義一個動畫效果，@keyframes定義的規則可以用來控制動畫過程中的各個狀態的情況，語法大抵是這個樣子：

　　@keyframesW{

　　from{left:0;top:0;}

　　to{left:100%;top:100%;}

　　}

　　@keyframes關鍵詞后跟動畫的名字，然后是一個塊，塊中有動畫進度的各個選擇器，選擇器后的塊則依舊是我們常見的各個CSS樣式屬性。

　　在這里，控制動畫的整個過程的選擇器很重要，語法相對簡單，你可以使用from或者0%來表示起始狀態，而to或100%來表示結束狀態。中間的部分你都可以使用百分比來進行表示。選擇器后的塊則是在到達這個進度狀態時元素的樣式應該是怎么樣的，整個的過渡動畫在這個的控制基礎上由瀏覽器去繪制。

　　同樣地，不是所有的屬性都可以有動畫效果，MDN維護了一份CSS動畫的屬性列表可供參考。

　　通常來說，多個狀態下的相同屬性的值應該是可以取到它們的中間值的，例如left從0%到100%，如果沒法取到中間值，如height從auto到100px，有可能出現奇怪的一些狀況，并且不同瀏覽器對此的處理也不盡相同，所以請盡量避免這種情況。

　　animation屬性

　　animation的屬性比transition多，如下：

　　animation-name你需要的動畫效果的@keyframes的名字。

　　animation-delay和transition-delay一樣，動畫延遲的時間。

　　animtaion-duration和transition-duration一樣，動畫持續的時間。

　　animation-direction動畫的一個方向控制。

　　默認是normal，如果是上述的left從0%到100%，那么默認是從左到右。如果這個值是reverse，那么便是從右到左。

　　由于animation提供了循環的控制，所以還有兩個值是alternate和alternate-reverse，這兩個值會在每次循環開始的時候調轉動畫方向，只不過是起始的方向不同。

　　例如還是left的例子，假設設置了animation-direction:alternate;animation-iteration-count:infinite;，那么這個元素從左到右移動后，便調轉方向，從右到左，如此循環。

　　animation-fill-mode這個屬性用來控制動畫前后，@keyframes中提供的CSS屬性如何應用到元素上。

　　默認值是none，還有其他三個選擇：forwards，backwards，both。

　　假設是none，那么動畫前后，動畫中聲明的CSS屬性都不會應用到元素上。即動畫效果執行后，元素便恢復正常狀態。

　　如果是forwards，那么動畫結束后，會把最后狀態的CSS屬性應用到元素上，即保持動畫最后的樣子。而backwards則相反，both則都會，計算得出最后的一個結果。

　　animation-timing-function和transition-timing-function一樣，動畫變化軌跡的算法。

　　animation-iteration-count動畫循環次數，如果是infinite則無限次。有趣的是，支持小數，即0.5表示動畫執行到一半。

　　animation-play-state動畫執行的狀態，兩個值running或者paused，可以用來控制動畫是否執行。

　　上述這些屬性可以簡寫為：

　　.class{

　　animation:}

　　略長，當然，平時使用中可能是省略部分參數的。

　　animation需要留意的東西

　　1.優先級

　　記得CSS中的層疊概念么，優先級高的屬性會覆蓋優先級低的屬性，當animation應用到元素中時，動畫運行過程中，@keyframes聲明的CSS屬性優先級最高，比行內聲明!important的樣式還要高?，F在瀏覽器的實現是這樣子的，但是標準文檔中的說法應該是可以被!important聲明的屬性所覆蓋。

　　多個動畫的順序

　　由于animation-name是可以指定多個動畫效果的，所以這里便會出現動畫的一個順序問題。后指定的動畫會覆蓋掉前邊的，例如：

　　#colors{

　　animation-name:red,green,blue;/*假設這些keyframe都是修改color這個屬性*/

　　animation-duration:5s,4s,3s;

　　}

　　上述代碼的動畫效果會是這樣：前3秒是blue，然后接著1秒是green，最后1秒是red。整個覆蓋的規則是比較簡單的。

　　display的影響

　　如果一個元素的display設置為none，那么在它或者它的子元素上的動畫效果便會停止，而重新設置display為可見后，動畫效果會重新重頭開始執行。

　　animation相關事件

　　我們可以通過綁定事件來監聽animation的幾個狀態，這些事件分別是：

　　animationstart動畫開始事件，如果有delay屬性的話，那么等到動畫真正開始再觸發，如果是沒有delay，那么當動畫效果應用到元素時，這個事件會被觸發。

　　animationend動畫結束的事件，和transitionend類似。如果有多個動畫，那么這個事件會觸發多次，像上邊的例子，這個事件會觸發三次。如果animation-iteration-count設置為infinite，那么這個事件則不會被觸發。

　　animationiteration動畫循環一個生命周期結束的事件，和上一個事件不一樣的是，這個在每次循環結束一段動畫時會觸發，而不是整個動畫結束時觸發。無限循環時，除非duration為0，否則這個事件會無限觸發。

感謝各位的閱讀！關于“CSS制作動畫的屬性有哪些”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！