CSS animation-direction 属性

主题

默认模式
浅蓝色模式
淡绿色模式
深夜模式

定义和用法

animation-direction是 CSS 动画属性之一，用于控制动画播放的方向。

animation-direction值为alternate时，动画会在奇数次数时正常播放，偶数次数时反向播放。

常用的实例

接下来通过多个实例演示animation-direction属性的用法，来深化您对animation-direction属性的理解。

实例代码运行代码

复制

.box {
    animation-name: slide;
    animation-duration: 3s;
    animation-iteration-count: infinite;

    /* 可以尝试修改以下值查看不同效果 */
    animation-direction: alternate;
}

@keyframes slide {
    from { transform: translateX(0); }
    to { transform: translateX(100px); }
}

CSS 语法

animation-direction: normal | reverse | alternate | alternate-reverse;

属性值

值	描述
`normal`	动画正常播放（从 0% 到 100%）(默认值)。
`reverse`	动画反向播放（从 100% 到 0%）。
`alternate`	动画在奇数次正向播放，偶数次反向播放。
`alternate-reverse`	动画在奇数次反向播放，偶数次正向播放。