Atitti css transition Animation differ區別

 

 

Atitti  css   transition Animation differ區別

 

1.1. transition的優勢在於簡單易用，可是它有幾個很大的侷限。  1

1.2. js 動態改變 style 內容 ，樣式覆蓋 1

1.3. Velocity 和 GSAP2

 

 

1.1. transition的優勢在於簡單易用，可是它有幾個很大的侷限。 

（1）transition須要事件觸發，因此無法在網頁加載時自動發生。 
（2）transition是一次性的，不能重複發生，除非一再觸發。 
（3）transition只能定義開始狀態和結束狀態，不能定義中間狀態，也就是說只有兩個狀態。 
（4）一條transition規則，只能定義一個屬性的變化，不能涉及多個屬性。 
CSS Animation就是爲了解決這些問題而提出的。

 

1.2. js 動態改變 style 內容 ，樣式覆蓋

  var style = document.getElementById("dynamic")

    style.innerHTML = '@-webkit-keyframes myfirst{50% {background: '+color+';} }\n'

             + '@keyframes myfirst {50% {background: '+color+';}}'

 

var tt=document.styleSheets[0];

tt.deleteRule(6);//清除以前寫入的動畫樣式console.log(tt);

tt.insertRule("@keyframes mymove{0%{} 100%{transform:rotateZ(0deg);top:10%;left:30%;width:400px}}",6);//寫入樣式

 

keyframes之因此是複數，就是由於它裏面還包含不少子樣式keyframe
keyframe至關於普通CSS樣式的rule，因此keyframe對象纔有 style 屬性，能夠用來進行修改

 

1.3. Velocity 和 GSAP  jQuery anim.

 

　　兩個最經常使用的javascript動畫庫是 Velocity.js 和 GSAP。這些庫在使用jQuery的時候並無性能損耗，由於它們都沒有使用jQuery的動畫棧。

　這樣來處理動畫就不會存在性能上的浪費。你會發現它javascript的性能真的和CSS差很少，並且操做更方便。

 

　但事實是基於javascript的動畫效果一般和基於css的動畫同樣快，有些甚至更快一些。CSS動畫一般被以爲比較快，由於咱們老是拿它和jQuery動畫相比，其實慢的是jQuery的$.animate()，然而javascript的動畫庫避免了DOM操做，經常比jQuery快20倍左右。

 

 

Jqa 比較好的anim庫了...檢索累掛在的庫,新不上啊...

【CSS3】transition過渡和animation動畫 - 季詩筱的博客 - 博客頻道 - CSDN.NET.html

javascript - js如何動態修改@keyframes相關值？ - SegmentFault.html

css - JavaScript怎麼修改@keyframes - SegmentFault.html

放棄使用jQuery實現動畫 - A5創業網.html

做者:: 綽號:老哇的爪子 （ 全名：：Attilax Akbar Al Rapanui 阿提拉克斯 阿克巴 阿爾 拉帕努伊 ） 

漢字名：艾提拉（艾龍），   EMAIL:1466519819@qq.com

轉載請註明來源： http://www.cnblogs.com/attilax/

Atiend