css3动画之@keyframes

我们知道，一个页面的是否美观是由css来决定的，当一个元素的css改变时，其外观也会因此而改变。那么我们对一个元素的样式进行多次改变，这个元素就会“ 动 ” 起来，形成一个动画效果。而在css3中就为我们提供了一种方法来使我们能够频繁地改变元素的样式，来让元素“ 动 ”起来，他就是 @keyframes规则。

@keyframes规则

@keyframes规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式，这是它能够使元素动起来的原因。

语法：

@keyframes Name//名字
{
    from {}//初始样式
    to {}//最终样式
}

from 或者 0%：
from 后面的花括号里面填写的样式是元素的初始样式，也就是元素的最开始的样式,from也可以写成0%。
to 或者 100%：
to 后面的花括号里面填写的样式是元素进行完动画后的最终样式，也就是动画完成后的样式。同样，to也可以写成100%。

0% 25% 50% 75% 100%：

当我们需要对一个样式进行跟精致的动画设计时，我们可以将from - to 使用百分比来替换，可以在改变样式的过程中使画面更流畅，也更细腻。百分比的不同可以使画面变化的速度也不同。

animatio：

光在 @keyframes里面填写样式是无法让元素动起来，还需要我们将其运用到相应的地方上。这就像我们在一个函数里面写了方法，在没调用函数之前，函数里面的方法起不到效果。而animatio就是调用@keyframes的方法。

语法：

 div
{
    animation:mymove 5s infinite;
}

mymove 是定义 @keyframes规则时所定义的名字，5s则是规定五秒的时间完成@keyframes规则里面样式的变换。

div:c{
 animation:mymove 5s infinite;
}

也可以使用伪类选择器来绑定所需要的 @keyframes。
与之有关的属性还有很多，像我们常用的：
animation-iteration-count:1; 规定了动画执行的次数。
animation-fill-mode: none;规定了动画结束以后应用的样式，默认值none。