Transition屬性&&animation

transition: property duration timing-function delay;

 

transition 是令一個或多個能夠用數值表示的css屬性值發生變化時產生過渡效果。相似flash的補間動畫。但只有兩個關鍵幀。開始，結束。

Animation：對元素某個屬性或多個屬性的變化，進行控制(時間等)，相似flash的補間動畫。能夠設置多個關鍵幀。

 

在作項目中常常會碰見這樣的情景，好比一個按鈕，當鼠標移入進去的時候改變按鈕背景顏色以及字體顏色，此時咱們通常會這麼作：

.btn{width: 80px;height: 25px;border: 1px solid #333;color:#333;text-align: center;line-height: 25px;}
.btn:hover{background:green;color:white;}

 

咱們會發現背景以及字體顏色是瞬間改變的，是否是會顯得特別生硬呢

此時transition就登場了，見代碼：

.btn{width: 80px;height: 25px;border: 1px solid #333;color:#333;text-align: center;line-height: 25px;} 

.btn:hover{background:green;color:white;transition：0.4s;}

 

加入transition後咱們會發現按鈕背景顏色以及字體顏色具有一個時間漸進的過程，直至結束。

如果只想讓背景顏色具有一個時間段的變化：transition: 0.4s background ease-in

transition雖然簡單好用，可是咱們會發現它受到各類限制。

1：transition須要一個事件來觸發，好比hover，因此無法在網頁加載時自動發生

2: transition是一次性的，不能重複發生，除非一再觸發。

3： transition只能定義開始狀態和結束狀態，不能定義中間狀態，也就是說只有兩個狀態。

4：一條transition規則，只能定義一個屬性的變化，若是涉及兩個屬性，須要屢次制定屬性

 

transition:background-color .5s ease-in, width .5s ease-in

 

 

animation

1：animation動畫不須要觸發，一旦定義會自動播放

2：animation能夠經過animation-iteration-count來設置循環次數。

3：animation能夠定義多個關鍵幀

4：animation能夠經過幀添加任何屬性變化

div{
 width: 100px;
 height: 100px;
 background: red;
 animation: anim 5s infinite alternate;/*infinite alternate 一直執行*/
}

@keyframes anim{
 0%{background: red;left:0px;top:0px}
 25%{background: blue;left:200px;top:0px}
 50%{background: green;left: 200px;top:200px}
 75%{background: yellow;left: 0px;top:200px}
 100%{background: red;left: 0px;top:0px}
}

 

屬性值：

 

GPU加速

動畫卡頓是在移動端web開發時常常會遇到的問題，解決這個問題通常會用到css3硬件加速。主要是經過GPU進行渲染，解放CPU。

例如在使用animation時將left、top改成transform:translate()

原理：

DOM樹和CSS結合後造成渲染樹。渲染樹中包含了大量的渲染元素，每個渲染元素會被分到一個圖層中，每一個圖層又會被加載到GPU造成渲染紋理。GPU中transform是不會觸發repaint的，這一點相似於3D繪圖功能，最終這些使用transform的圖層都會由獨立的合成器進程進行處理。

瀏覽器不直接經過CPU生成圖像數據顯示出來，而是把相關層數據發送給GPU，而GPU在圖像數據運算方面有天生優點，因此算是加速。

 

如何開啓GPU加速？不少瀏覽器提供了某些觸發的CSS規則：

（1）3D變換

.cube {
   -webkit-transform: translate3d(250px,250px,250px)
   rotate3d(250px,250px,250px,-120deg)
   scale3d(0.5, 0.5, 0.5);
}

可是有時咱們不須要對元素進行3D變換的效果，怎麼辦？可使用小技巧「欺騙」瀏覽器來開啓硬件加速。咱們一樣能夠開啓3D加速。例如能夠使用transform:translateZ(0)來開啓硬件加速。

（2）透視變換（perspective transform）CSS屬性

（3）使用加速視頻解碼的元素，如<canvas>

（4）對本身的opacity作CSS動畫，或者使用一個動畫webkit變換的元素。

（5）擁有加速CSS過濾的元素，如CSS filters。

（6）擁有3D（webGL）上下文或者加速的2D上下文的canvas元素。