CSS3动画——animation&transition

动画一般有CSS动画和JS动画，另外其实还可以用计时器写动画，或者canvas里去绘制，这些就不提，这篇主要来说CSS动画。这里姑且是把transition也归类为动画的。

CSS动画有animation（动画）和transition（过渡），我们分开来讲：

animation

来看一个简写的animation用法

div
{
animation:mymove 5s infinite;
}

这里写了的三个参数分别是@keyframes(动画规则),动画时长以及重复播放次数。其中mymove就是一个@keyframes的name，所以在学习了解animation之前，我们需要先知道@keyframes。

@keyfreames事实上是由元素的若干个状态组成的，最简单的情况是开始和结束的状态，例如：

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

那么这个动画就是把背景色从红色变为黄色，具体怎么去播放这个动画，在animation里面控制；

animation的动画属性包括

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction