css动画

CSS3动画是什么？

动画是使元素从一种样式逐渐变化为另一种样式的效果。
您可以改变任意多的样式任意多的次数。
当在@keyframes创建动画，把它绑定到一个选择器（动画的名称），否则动
画不会有任何效果。

@keyframes规则

要创建CSS3动画，你需要了解@keyframes规则。
@keyframes规则是创建动画。
@keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式

规定动画的名称，规定动画的时长

请用百分比来规定变化发生的时间，或用关键词"from"和"to"，等同于0%
和100%。
0%是动画的开始，100%是动画的完成。

为了得到最佳的浏览器支持，您应该始终定义0%和100%选择器。
把"myfirst"动画捆绑到div元素，时长：5秒：
当动画为25%及50%时改变背景色，然后当动画100%完成时再次改变：

div{
   animation: myfirst 5s;

}
@keyframes myfirst{
    0%{background:red;}
    25%{background:yellow;}
    50%{background:blue;}
    100%{background:green;}
}