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是一个复合属性，更多可以设置的属性参考下表。

本文来自css答疑栏目，欢迎学习！

以上就是css中animation怎么用的详细内容，更多请关注0133技术站其它相关文章！