CSS3动画

来源：深圳兄弟连IT培训学校时间：2019/8/16 8:40:59

CSS3中规范引入了两种动画，分别是transition和animation，transition

可以让元素的CSS属性值的变化在一段时间内平滑的过渡，形成动画效果，为了使元素的变换更加丰富多彩，CSS3还引入了transfrom

属性，它可以通过对元素进行平移(translate)、旋转(rotate)、放大缩小(scale)、倾斜(skew)

等操作，来实现2D和3D变换效果。transiton还有一个结束事件

transitionEnd，该事件是在CSS完成过渡后触发，如果过渡在完成之前被移除，则不会触发transitionEnd。

animation需要设置一个@keyframes，来定义元素以哪种形式进行变换，

然后再通过动画函数让这种变换平滑的进行，从而达到动画效果，动画可以被设置为永久循环演示。设置animation-play-state:paused

可以暂停动画，设置animation-fill-mode:forwards

可以让动画完成后定格在最后一帧。另外，还可以通过JS监听animation的开始、结束和重复播放时的状态，分别对应三个事件，即

animationStart、animationEnd、animationIteration。注意，当播放次数设置为1时，不会触发animationIteration。

和transition相比，animation设置动画效果更灵活更丰富，还有一个区别是：transition

只能通过主动改变元素的css值才能触发动画效果，而animation一旦被应用，就开始执行动画。另外，HTML5还新增了一个动画API，即

requestAnimationFrame，它通过JS来调用，并按照屏幕的绘制频率来改变元素的CSS属性，从而达到动画效果。