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;
这样元素就会左右平滑摆动，而不是每次都从左到右突兀重置。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

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

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

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

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！