CSS3 animation属性

对于 CSS3 animation 属性其完整的语法如下：

animation: name duration timing-function delay iteration-count direction;

• name是使用@keyframes定义好的关键帧名称
• duration从字面意思可知是指定动画持续时间
• timing-function 指定动画以何种方式播放，具体指的是从元素的一个状态过渡到另一个状态所使用的方式，可用的值有linear，ease, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n)。每种方式的讨论超出了原计划，这里只是列出
• delay指定一个延时让动画不立即播放
• iteration-count 指定动画重复次数，可以指定一个数字，也可以使用‘infinite‘表示一直播放
• direction指定动画是否反向播放或者交替着播放，可用的值有normal, reverse, alternate, alternate-reverse

其中name和duration 是必需的，如果不指定duration默认为0，也就是动画持续0秒，所以就无法看到动画效果。

在前面已经定义好了关键帧了，现在我们使用animation将其应用到相应元素上。

现在打开页面就会看到最上面那个动画效果了。

使用百分比指定关键帧的版本

上面介绍过通过百分比的形象我们可以指定动画过程中任何时间点时元素的状态，将上面的版本变为百分比版本是非常容易的事情。

我们只需把关键帧的定义由from to 改为想要的时间百分比即可。

比如开始的状态不改变，增加一个动画进行到50%时颜色为黄色大小为75X75，最后为绿色大小为100X100。