Atitti  css   transition Animation differ区别

时间:2023-03-09 02:50:58
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动画 - 季诗筱的博客 - 博客频道 - ****.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