现在动画效果是有的，但是他并没有表现出和前面过渡效果的明显区别，因为我们只讲了仅仅是能让它动起来的核心内容。
大家应该可以看出，无论是过渡属性还是动画属性，其实都是复合属性，叫做快捷属性，总之就是把许多相关属性简写到一个属性之中。因为目前我们的目标就是初步的了解和基础的使用，所以也没有必要刻意地展开。
下面我把我们初步会用到的参数都写出来[1]，然后逐一讲解一下。其中的一些参数可以省略，但是一定要注意这些参数的先后顺序：
#miao {animation: 3s 1s 2 reverse move_it;}前面两个时间，这是动画执行的时间，和延迟执行的时间，这个顺序和我们前面写过渡的时候不一样。它们的单位都是秒，而且很明显都已经自带单位（s）了，这一点和我们写 jQuery 的时候不一样。
第 3 个数字是执行的次数，默认执行一次就停止了，次数肯定不能为负数，不过很神奇的，它可以用小数。也可以使用关键字 infinite 让动画无限循环下去。
第 4 个值是动画执行的方向：
- normal： （默认值）就是正向执行，从 from 到 to；
- reverse： 反向执行，从 to 到 from；
- alternate： 交替执行，先从 from 到 to，再从 to 到 from，如此往复；
- alternate-reverse： 反向交替执行，先从 to 到 from，再从 from 到 to，如此往复
挺好理解的，也就两个生词，但是我记不住，我知道它们可以设置方向，然后需要的时候我会去查文档。
最后一个是我们要执行的动画的名字。
关于动画还有很多其他属性，关于过渡也是。这部分我们讲的只是很基础的，能让它动起来了，我们也可以去使用了。但如果你觉得这些内容没有办法满足你现在的需求，一定记得去查看文档，进行进一步的学习。
动画把关键帧单独出来进行定义，是因为它可以一次去定义多个关键帧，并不一定只是两个，这就非常的厉害了。我们的过渡效果，只能是从一个状态到另外一个状态，而动画效果，可以从一个状态到另外一个状态，这个过程中，又经过许多我们指定的状态。
这样描述，不够直观，所以举个简单的例子：我们从黑色过渡到白色，这个过程中，颜色是不同程度的灰色，他可能是红色吗？可能是绿色吗？过渡只能直接的走向目标。但是动画就可以，我们可以让从黑色到白色的动画中，先变到红色再变到绿色，最后变成白色。让他按照我们所指定的路线，去完成这个过程。
这时候 from、to 两个命名就不够用了，还好，我们可以使用百分比：
@keyframes change_color {0% {background: black;}33% {background: red;}66% {background: green;}100% {background: white;}}所以其实 from 和 to 这两个关键字就相当于 0% 和 100% 。然后，如果我们让动画进行循环播放，请注意关键帧的前后衔接问题。
至此，CSS 的动画效果我们就讲完了。道理上是很简单的，但如何去应用，却值得我们深入思考和反复实践。
暂无评论内容