在html5中关键帧属性的描述,CSS动画属性关键帧keyframes全解析

大概有多久没有更新专栏文章了。半年？下半年忙到起飞，或者毫不夸张的说是发射？仅有的一点个人时间，上半年贡献给了Python，现在差不多已忘掉了七七八八(一首《凉凉》送给自己)，下半年贡献给了JavaScript，终于鼓起勇气系统的开始学习JS了(换台，梁静茹《勇气》走起)。本来想一直等等等，等到webapi学完后放个大招，svg+CSS动画搭乘上JavaScript简直如虎添翼长驱直入。但是，看掘金作者群里讨论的风生水起，突然感觉自己全然是陌生人(此处应放蔡健雅？)，所以，更一篇文章刷一下存在感。

这篇文章本来是写的《SVG+CSS动画》小册中的一个小节选，小册因为各种莫名的原因，搁浅了，搁浅……起航时间遥遥无期，但keyframes关键帧作为控制动画在不同时间的状态的重要元素，决定了七十二变的终极形态，所以这次更新专栏拿它下手。至于小册嘛，如果能发的话，里面再换成其他的案例就好，此为后话。

关键帧keyframes的基础概念此处可省略，下面才是满满的干货。

案例：一路向前永不停歇的圆

因为只是来解释关键帧，所以只搞了一个简易的仅水平位移的动效。因此，这篇文章得以脱离SVG单独存在仅和CSS3动画属性相关。

这是一个努力从起点滚向终点的圆圈，整个路程为800px，但我在它的必经之路的三处设置了三个驿站。现在就要通过关键帧的定义让圆圈在行进的路上进入驿站并稍作停顿。

1.先来一个最基础的

CSS部分定义一个最基础的位移动画，4s完成，线性速度case-关键帧演示1-基础。

@keyframes move{

0%{transform:translateX(0)}

100%{transform:translateX(800px)}

}

.c_move{animation:move 4s linear both} /*both:运动结束后停留在终点*/

复制代码

这个发挥作用主要是在定义了无限循环动画时。