标签：
css3的动画支持大多数浏览器，但最好还是加-webkit-animation等属性
IE9以及以前的版本并不支持。
animation属性是一个简写属性，用于设置六个动画的属性;
animation-name 动画名称(自己取的名称)
animation-duration 动画持续时间(这个必须要写，否则显示不出效果)
animation-timing-function 动画的速度曲线，默认是"ease"
animation-delay 动画何时开始，默认0.（这个需用秒或毫秒左单位:0s）
animation-iteration-count 动画迭代计数,默认1(动画的重复次数，设infinite为无数次)
animation-direction 动画方向
动画还需要一个关键帧来控制，需要重新用一个css3规定动画属性编写
例如animation-mymove那么后面名字就是用来连接帧的
@keyframes mymove前面的@就是用来声明属性，后面mymove即可连接在一起。
前面都是属性，它默认的属性值为none，0并且无继承行的。
@keyframes mymove{
from{background:red;}
to{background:yellow}
}
@keyframes mymove属性，它的属性值里面有几种方法。
这里from是开始，它的属性值是红色。
to是结束，它的属性值是黄色，
animation-duration,设置了时间。记得设置宽高才看得见效果
然后会发现它会从红到黄产生一个动画。
什么是css3中的动画？
动画是使元素从一种样式逐渐变化为另一个样式的效果。
您可以改变任意多的样式任意多的次数。
用百分比来规定变化发生的时间，或用关键词from和to，等同于0%和100%。
0%是动画的开始，100%是动画的完成。
为了得到最佳的浏览器支持，您应该始终定义0%和100%选择器。
@keyframes mymove{
0%{background:red;}
25%{background:yellow;}
50%{background:blue;}
100%{background:green;}
}
以上只是改变了背景色，如需改变位置的话如下:
@keyframes mymove{
0%{background:red; left:0px; top:0px;}
25%{background:yellow;left:200px; top:0px;}
50%{background:blue; left:200px; top:200px}
75%{background:red; left:0px; top:200px;}
100%{background:green;left:0px; top:0px;}
}
0%的时候背景是红色，位置保持不变。
25%的时候背景是黄色，离左200px，上为0.
50%的时候背景是蓝色，离左200px,离上200px.
75%的时候背景是红色，左为0,离上200px.
100%的时候背景绿色， 左为0,上为0.回到了原点了。
标签：
原文地址：http://www.cnblogs.com/liang1/p/4956731.html
