@keyframes 语法规则在动画过程中，可以多次更改CSS样式。指定的变化发生时使用％，或关键字"from"和"to"，这和0％到100％相同。0％是开头动画，100％是当动画完成。为了获得最佳的浏览器支持，应该始终定义为0％和100％的选择器。
@keyframes就是个动画，可以理解成多个transform组成的一个组。语法：@keyframes 动画名 { from{ css1} to{ css2 } }
@keyframes 动画名{0% {css1}50% {css2}100% {css3}}注：使用animation属性来控制动画的外观，还使用选择器绑定动画。
二、animation属性值
当调用这个动画时用animation ，animation由六个属性组成：
animation-name 指定要绑定到选择器的关键帧的名称animation-duration 动画指定需要多少秒或毫秒完成animation-timing-function 设置动画将如何完成一个周期animation-delay 设置动画在启动前的延迟间隔animation-iteration-count 定义动画的播放次数animation-direction 指定是否应该轮流反向播放动画animation : 动画名 时间 速度曲线 开始的时候延迟 播放次数 轮流反向播放 举个例子看看：
让正方形从左上角向右上角再向右下角到左下角最后回到左上角，并且颜色也会随之变化
CSS3中使用@keyframes创建动画，实例讲解代码块
div{animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}
@keyframes mymove
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
