css3 动画animation 及@keyframes 规则

前端实现动画效果无非js与css 两种，这里主要讲一下css动画的实现以及区别

@keyframes 规则

//宽度从100px 变成 200px
// boxW 为 方法名

@keyframes boxW {
  from {width:100px;}
  to {width:200px;}
}

//或 
//from（与 0% 相同）； to（与 100% 相同）

@keyframes boxW {
  0%   {width:100px;}
  100% {width:200px;}
}

animation 属性

//示例 使用 boxW 方法，div会在5秒内从100px 变为 200px
div {
  animation: boxW 5s infinite;
}

值	描述
animation-name	规定需要绑定到选择器的 keyframe 名称。。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。
animation-fill-mode	属性规定动画在播放之前或之后，其动画效果是否可见。

animation-timing-function

值	描述
linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

animation-iteration-count

值	描述
n	定义动画播放次数的数值。
infinite	规定动画应该无限次播放。

animation-fill-mode

值	描述
none	不改变默认行为。
forwards	当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards	在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both	向前和向后填充模式都被应用。

animation-direction

值	描述
normal	默认值。动画应该正常播放。
alternate	动画应该轮流反向播放。

js与css 动画的区别

js动画

优点：

• js动画代码复杂，因此可操作性高，可以对动画比较好的控制，例如：开始、暂停、回放、取帧等

• 动画效果比css3动画丰富,有些动画效果，比如曲线运动,冲击闪烁,视差滚动效果，只有js动画才能完成

• css3有兼容性问题，而JS大多时候没有兼容性问题

缺点：

• js动画是逐帧动画，是在时间帧上逐帧绘制帧内容，由于是一帧一帧的话,虽然可操作性高，但是如果帧率过低的话，会帧与帧之间的过渡很可能会不自然、不连贯。

• (2)代码的复杂度高于CSS动画

css 动画

优点：

• 制作方法简单方便。只需确定第一帧和最后一帧的关键位置即可，两个关键帧之间帧的内容由Composite线程自动生成，不需要人为处理。

• (3)对于帧速表现不好的低版本浏览器，css3可以做到自然降级，而JS则需要撰写额外代码

缺点：

• 想要做到一些酷炫的效果的时候，其操作往往可能会比js操作有更多的冗余。

• 因为只设置几个关键帧的位置，所以在进行动画控制的时候时比较弱的。不能够在半路暂停动画，或者在动画过程中不能对其进行一些操作等。

总结

如果动画只是一些简单的状态切换，滑动等效果，不需要中间的控制过程，css3是比较好的选择，它直接在css文件中就可以实现，并不需要引入太多的js库。而你想做一些复杂的客户端界面，开发一个复杂ui的app，实现一个复杂纹理动画等，需要对页面进行精准的控制计算，js是不错的选择。