css中animation怎么用

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	规定是否应该轮流反向播放动画。