css3之关键帧的解说

我们在之前的文中讲到过一个例子：

那么，这边也利用css触发了一个类似于aniamte的动作，就是用到了css3的动画效果transition，他的效果如下：

但是transition只能执行一次动画，如果我们想在这个动画基础上再新增一个别的动画，就需要再次定义一个事件，然后加上transition:all 1s linear，这样非常的麻烦，于是就出现了css3的关键帧动画： @keyframes
首先，我来写一个@keyframes的案例，之后我根据这个案例来详细的解说：

效果如下：

大家是否已经发现，通过@keyframes关键帧，我们可以不借助js，使用简单的几行代码来完成一系列的animate。那么代码具体含义是什么呢？
首先，我们来看@keyframes的格式：

@keyframes 定义后代表这段代码是一个关键帧。 changes就类似于一个函数名，这个关键帧的内容里面，20%，40%，60%，80%，100%代表的是当时间到达20%的时候，需要完成一个什么样的样式，20%后面就跟的是具体的样式。

这段代码就是定义这个@keyframes，animation:changes 10s linear 是执行这个关键帧，changes就是关键帧的函数名 10s代表时间，linear代表匀速。之前的文章中我们提到过关于匀速，加速，减速的一系列的属性值，这里就不多做解释了。
最后，我们需要在div 的class中加入这个animate ，才能够起到真正的执行效果。
在animation的样式中，也可以写成这种：

最后的3S代表的是当执行这个animation时，延迟3秒再执行。
animation所有的属性也可以单独设置：
animation-name：检索或设置对象所引用的动画名称
animtion-duration：检索或设置对象动画的持续时间
animation-timing-function：检索或设置对象动画的过渡类型
animation-delay：检索或设置对象动画延迟的时间
animation-iteration-count：检索或设置对象动画的循环次数
aimation-direction：检索或设置对象动画在循环中是否反向运动
我们可以把上面的change动画设置成以下形式：

那么同样也能达到效果，并且最后一行代码是让这个动画反复执行4次。注意，这里也可以循环无限次，属性值是infinite：
animation-iteration-count:infinite;