CSS-关键帧动画

最新推荐文章于 2025-10-17 11:32:52 发布

原创最新推荐文章于 2025-10-17 11:32:52 发布 · 755 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

31 篇文章

订阅专栏

本文详细介绍了CSS中关键帧(@keyframes)的定义及使用方法，并解释了animation属性的各种参数，包括名称、持续时间、计时函数、延迟、播放次数、方向及状态等。

关键帧Keyframes,用来指定动画效果的几个中间状态。
语法为：

@Keyframes colorchange {
    0% {
        color: red;
    }
    50% {
        color: blue;
    }
    100% {
        color: green;
    }
}

除了使用百分比，还可以使用from和to

@Keyframes colorchanges {
    from {  //from代表0%
        color: red;
    }
    to {  //from代表100%
        color: green;
    }
}

使用animation调用动画

a:hover {
    -webkit-animation: colorchange 5s ease 1s;
    -moz-animation: colorchange 5s ease 1s;
    -ms-animation: colorchange 5s ease 1s;
    -o-animation: colorchange 5s ease 1s;
    animation: colorchange 5s ease 1s;
}

animation也是一个复合属性

animation-name
animation-duration
animation-timing-function
animation-delay
animation-count,可用值为infinite表示无穷，整数表次数
animation-direction 动画播放方向。normal表示正常向前播放，alternate表述偶数次向前，奇数次反向。
animation-play-state 播放状态，running表示播放，默认值。paused表示暂停播放。
animation-fill-mode 描述动画开始和结束之后发生的操作。

属性值	效果
none	默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处
forwards	表示动画在结束后继续应用最后的关键帧的位置
backwards	会在向元素应用动画样式时迅速应用动画的初始帧
both	元素动画同时具有forwards和backwards效果