css中animation怎么用
animation比较类似于 flash 中的逐帧动画，逐帧动画就像电影的播放一样，可以让很多其它CSS属性产生动画效果，比如color, background-color, height， width等。当然，你需要为每个动画定义@keyframes CSS规则，animation需要调用这些@keyframes产生动画效果。在 CSS3 中是由属性keyframes来完成逐帧动画的。
(相关课程推荐：css视频教程)
@keyframes 格式：@keyframes animationName {
from {
properties: value;
}
percentage {
properties: value;
}
to {
properties: value;
}
}
//or
@keyframes animationName {
0% {
properties: value;
}
percentage {
properties: value;
}
100% {
properties: value;
}
}
animation 语法：animation: name duration timing-function delay iteration-count direction;
示例：
1. 新建一条@keyframes 名称为myfirst；
2. from规定了动画开始时的背景颜色为red；
3. to规定了动画结束时的背景颜色为yellow；@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes myfirst /* Firefox */{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */{
from {background: red;}
to {background: yellow;}
}
@-o-keyframes myfirst /* Opera */{
from {background: red;}
to {background: yellow;}
}
4. 指定某个元素的animation动画为myfirst，动画时间为5s。div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s;/* Firefox */
-webkit-animation: myfirst 5s;/* Safari 和 Chrome */
-o-animation: myfirst 5s;/* Opera */
}
animation是一个复合属性，更多可以设置的属性参考下表。值描述
animation-name规定需要绑定到选择器的 keyframe 名称。。
animation-duration规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function规定动画的速度曲线。
animation-delay规定在动画开始之前的延迟。
animation-iteration-count规定动画应该播放的次数。
animation-direction规定是否应该轮流反向播放动画。
本文来自css答疑栏目，欢迎学习！
