17370845950

CSS动画方向由animation-direction属性控制，其常用值包括：①normal（正向）、②reverse（反向）、③alternate（奇正偶反）、④alternate-reverse（奇反偶正），配合iteration-count使用更明显，且不改变关键帧定义。

可以，CSS 动画的方向由 animation-direction 属性控制，它决定动画在每次循环中是正向播放、反向播放，还是来回交替。

animation-direction 的常用取值

该属性有四个主要值，直接影响动画的播放顺序：

• normal：默认值，每次循环都从头到尾播放（0% → 100%）

• 

  reverse：每次循环都从尾到头播放（100% → 0%），相当于把关键帧顺序倒过来
• alternate：奇数次循环正向（0% → 100%），偶数次反向（100% → 0%），常用于平滑往复效果
• alternate-reverse：奇数次反向（100% → 0%），偶数次正向（0% → 100%）

配合 animation-iteration-count 使用更明显

单次播放（animation-iteration-count: 1）时，reverse 和 normal 效果容易被忽略，因为只播一遍。要看出方向差异，通常需设置多次循环：

animation: slide 2s ease-in-out 0s infinite alternate;
这样元素就会左右平滑摆动，而不是每次都从左到右突兀重置。

注意：direction 不影响动画起始状态

animation-direction 只改变播放路径，不改变动画定义的关键帧逻辑。例如：

@keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } }
设为 reverse 后，实际执行的是「从 opacity: 1 开始，渐变到 0」，但关键帧本身无需修改。