Atitti css transition Animation differ差別

Atitti  css   transition Animation differ差別

​

1.1. transition的優點在于簡單易用，但是它有幾個很大的局限。 

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

（3）transition隻能定義開始狀态和結束狀态，不能定義中間狀态，也就是說隻有兩個狀态。 

（4）一條transition規則，隻能定義一個屬性的變化，不能涉及多個屬性。 

CSS Animation就是為了解決這些問題而提出的。

1.2. Transition是可以自動觸發的使用timeout

<script>

window.setTimeout(function()

{

console.log("--add cls");

$("#u").addClass("big");

},500);

console.log("--add cls2");

 $("#r").addClass("big2");

},1000);

1.3. 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.4. Velocity 和 GSAP

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

　這樣來處理動畫就不會存在性能上的浪費。你會發現它javascript的性能真的和CSS差不多，而且操作更友善。

　但事實是基于javascript的動畫效果通常和基于css的動畫一樣快，有些甚至更快一些。CSS動畫通常被覺得比較快，因為我們總是拿它和jQuery動畫相比，其實慢的是jQuery的$.animate()，然而javascript的動畫庫避免了DOM操作，常常比jQuery快20倍左右。