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倍左右。