CSS3animation动画与js动画的优缺点
CSS的animation属性
在⽹页中加⼊动画是⼀件很有意思的事情，⼀般我们可以使⽤js添加事件来实现动画。但还有⼀种⽅法可以实现动画效果，就是使⽤css 的animation属性。
CSS3中添加的新属性animation是⽤来为元素实现动画效果的。但是animation⽆法单独担当起实现动画的效果。这个我们会在后⾯讲到。我们先来讲讲animation的相关⽤法。这⾥我的代码均是采⽤标准的css3规范书写，⼤家使⽤的时候为了兼容可加上-webkit-、-o-、-ms-、-moz-、-khtml-等前缀以适应不同的浏览器。
以下例⼦说明
我们的animation 与div 是结合起来使⽤的，这样的⼀个代码也是⾮常简单的。
`div{animation:mymove 5s infinite;-webkit-animation:mymove 5s infinite;/* Safari 和 Chrome */}`
animation-name
第⼀个属性动画名称，这个动画名称是在@key-frames当中规定的，这也是我在开始的时候就说了animation⽆法单独当起动画实现的原因。因为实质性的动画效果都是在@key-frames当中设定好的。
实例：
animation-name：myAnimation；
animation-duration
第⼆个属性规定了动画时间。
也就是执⾏动画所运⾏的时间，他的单位是s或者hg毫秒，默认情况下为0。
实例：
animation-duration：5s
⼀般可直接写在animation-name的后⾯ 5s。
animation-timing-function
第三个属性定义了实现动画的⽅式（速度曲线），有这么⼏个值可以选择：
ease（默认的：慢-快-慢）
ease-in（缓⼊）
ease-out（缓出）
ease-in-out、linear（匀速）
cubic-bezier（n,n,n,n）【每个n的取值均在0-1之间】
step-start：马上转跳到动画结束状态。
step-end：保持动画开始状态，直到动画执⾏时间结束，马上转跳到动画结束状态。
steps([, [ start | end ] ]?)：第⼀个参数number为指定的间隔数，即把动画分为n步阶段性展⽰，第⼆个参数默认为end，设置最后⼀步的状态，start为结束时的状态，end为开始时的状态，若设置与animation-fill-mode的效果冲突，⽽以animation-fill-mode的设置为动画结束的状态。这个太复杂了！
animation-delay
第四个属性规定了动画的延迟执⾏时间，及延迟多久才执⾏，默认情况下为0；
若为证书，则按设置的时间执⾏；
若为负数，则截去相应的动画时间，从动画中间执⾏。⽐如我的动画时间为20S，现在设置该值为-5s，那么动画最后执⾏的时间是后⾯的15秒。
animation-iteration-count
规定动画执⾏的次数，默认的情况下执⾏1次，你也可以设置为5，或者10；如果你想让动画⼀直执⾏下去的话：将值设置为infinite即可，它表⽰⽆限的意思。
向下⾯的图⽚ ⼩圈的旋转就是⽆限的 循环rotate实现的，这可以省去制作⼀张gif动画图所花费的⼤量时间。
animation:run 10s  infinite /⽆限循环动画/
相对于css3的animation动画和js 的动画的优缺点
CSS3的动画的优点：
  1.在性能上会稍微好⼀些，浏览器会对CSS3的动画做⼀些优化（⽐如专门新建⼀个图层⽤来跑动画）
  2.代码相对简单
  但其缺点也很明显：
  1.在动画控制上不够灵活
js控制css3动画触发  2.兼容性不好
  3.部分动画功能⽆法实现（如滚动动画，视差滚动等）
  JavaScript的动画正好弥补了这两个缺点，控制能⼒很强，可以单帧的控制、变换，同时写得好完全可以兼容IE6，并且功能强⼤。但想想CSS动画的transform矩阵是C++级的计算，必然要⽐javascript级的计算要快。另外对库的依赖也是⼀个很让⼈头疼的问题。
  所以，对于⼀些复杂控制的动画，使⽤javascript会⽐较靠谱。⽽在实现⼀些⼩的交互动效的时候，就多考虑考虑CSS吧。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。