CSS3动画高级属性实战：玩转延迟、状态保持与循环节奏

做前端这些年，CSS3动画算是我觉得“入门最容易、玩透最难”的一个板块。transition和简单keyframes谁都会写，但一旦遇到“动画结束之后元素该留在哪”“多个动画怎么错开但不失同步”这种实际问题，网上能找到的资料就变得支离破碎，要么只讲参数不聊场景，要么全是抄文档。这篇作为CSS3专家级编程系列的第一篇，聚焦动画里最容易被低估的四个高级属性：animation-delay、animation-fill-mode、animation-iteration-count、animation-direction。它们单独看都不难，但组合起来能解决大量真实项目里的节奏控制问题。如果你是刚会用@keyframes、但一遇到复杂动效就靠硬编码transition硬撑的开发者，这篇文章应该能帮你省下不少排查时间。我尽量不按文档顺序讲，而是按照“一次动画从开始到结束到底经历了什么”这条主线，把这些属性串起来。每个关键点都会给实际场景和可运行代码，最后还有一个完整的组合案例。

1. 先搞懂动画的“生命周期”：为什么状态保持是门大学问

1.1 动画的一次完整旅程

要理解CSS3动画的高级参数，第一步是建立一张“时间线地图”。别急着背属性，先搞清楚一次完整的关键帧动画从触发到结束到底经历了什么。我习惯把一次动画分成四个阶段：动画尚未开始、正向播放、反向播放（如果配置了）、结束后的保持状态。动画尚未开始这个阶段可能存在延迟，也就是animation-delay在起作用；正向播放就是按@keyframes定义的0%到100%正常执行；反向播放是当你配置了reverse或alternate等方向后，动画从终点回放；结束后的保持状态则由animation-fill-mode决定元素是回到初始样式，还是停留在终点。

很多初学者只盯着“播放”那一段，完全忽略了前后两个“静默期”。问题是，恰恰是这两个静默期，决定了动画是显得干净利落，还是出现“闪回”“跳变”这些鬼畜效果。我用一个生活化的例子帮你记住这条时间线：放鞭炮。你点了引信，引信从点燃到烧进鞭炮的这段时间，就是animation-delay；引信烧完，鞭炮炸开，这是动画播放；炸完之后的余烟和纸屑留在原地还是瞬间消失，这就是animation-fill-mode在管；如果你连续放十挂鞭炮，每挂之间的节奏，就是animation-iteration-count和animation-direction在管。这个类比虽然粗糙，但很顶用，后面讲到每个属性，都可以回到这条时间线上去对号入座。

1.2 关键帧与时间线的底层关系

@keyframes做的事情，说透了就一句话：在动画时间轴的某些百分比位置，规定元素应该长什么样。但“动画时间轴”不等于“真实时间”。动画本身有一个时长（animation-duration），它定义了动画走完一遍标准时间的长度。animation-delay则控制真实时间轴上，从“触发”到“真正开始播放”之间那段间隔。关键来了：即使动画还没开始播，元素也是存在于页面上的，它此时显示什么样式？默认情况下，浏览器没有任何特殊处理，元素会保持“没有应用动画时的初始样式”。

这个“初始样式”和“动画第一帧的样式”之间的差异，就是新手最容易踩坑的地方。举个例子，做一个从透明到不透明的渐入动画：

css复制@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.element {
  opacity: 1;
  animation: fadeIn 1s ease 2s;
}

这段代码的意图可能是“元素先隐藏，延迟2秒后再淡入”。但实际上，在没有fill-mode干预的情况下，前2秒元素是opacity: 1的，到了第2秒动画突然从opacity: 0开始，视觉上就是“先亮着，猛地闪没，然后淡入”，非常奇怪。所以，学习高级动画的第一课就是：动画是“时间”的艺术，而不只是“属性”的艺术。接下来我们逐个拆解这四个属性，先看最容易被误解的animation-delay。

2. 动画延迟：不止是“晚点开始”

2.1 三种delay玩法：正、零、负

animation-delay最基础的语义是“延迟多久开始”，它支持三种值：默认0、正值、负值。零值不用多说，触发即播。正值最直观：触发后等N秒再开始播。真正值得研究的是负值。负值延迟（比如animation-delay: -2s）的意思是，动画已经提前2秒“开播”了，你触发它的时候，它其实已经走到了第2秒的位置。元素会直接显示动画第2秒那一帧的画面，并且继续往下播。

这个特性最大的价值在于：让多个元素共享同一条时间线，却处在不同的进度位置。最典型的就是loading动画里的三个圆点。正常思路是给三个点设置不同的正延迟，比如0s、0.2s、0.4s，效果是第一个点先动，0.2秒后第二个点动，0.4秒后第三个点动。问题在于，如果这是个infinite循环动画，前面总会有一段“只有第一个点在动”的启动期。用负延迟就能解决：

css复制.dot {
  animation: bounce 0.6s ease-in-out infinite alternate;
}

.dot:nth-child(2) {
  animation-delay: -0.2s;
}

.dot:nth-child(3) {
  animation-delay: -0.4s;
}

这段代码的效果是：页面一加载，三个点立刻进入“错开0.2秒”的循环状态，没有空白启动期，也不需要JS去计时。负延迟让它们“从不同的中间点起跑”，但又在同一条时间线上保持相对位置。这一点在做加载动画、轮播图指示器、多元素依次入场时特别实用。

2.2 正延迟期间元素处于什么状态

正延迟的坑，往往出在“延迟期间元素长什么样”。默认情况下，动画没有开始播放时，元素保持“未应用动画时的样式”，很多人会忽略这一点，直到看到动画开头“闪一下”才反应过来。还是前面fadeIn的例子，如果你想让元素在延迟期间就保持透明，必须配合animation-fill-mode: backwards。它会让浏览器在动画还没开始的时候，就先应用@keyframes里第一帧的样式。延迟越久，这个设置越重要，比如一个延迟3秒的渐入动画，如果前3秒元素以完全不透明的状态暴露在页面上，那基本等于告诉用户“这里有个东西准备要动了”，毫无惊喜感。

另一个容易被忽略的点是：正延迟在多个动画叠加时，会严重影响整体节奏。比如两个动画分别有1秒和2秒的延迟，它们执行的时间线会错开。在小交互里这问题不大，但在复杂的组合动画里，管理多个delay的时间线会很痛苦。我的建议是：能用负延迟解决的同步问题，就尽量用负延迟；必须用正延迟时，一定要想清楚“延迟期间这个元素应该显示什么”，然后用fill-mode兜底。

注意：负值延迟的另一个好处是无需fill-mode，元素就能立即处于动画中途的某个状态。这在“页面加载就要看到完整循环动效”的场景里非常好用，几乎没有成本和副作用。

3. 完成后状态的保持：animation-fill-mode 详解

3.1 四个选项的行为对比

animation-fill-mode决定的是“动画时间线之外”的元素样式。它的四个取值，分别对应了“动画之前”和“动画之后”两个时间段的处理策略。

看这个表就能发现，none是最容易理解但也最容易失控的选项——动画前后的状态完全交给元素自身默认样式，所以“闪回”问题多半就是它造成的。forwards和backwards各管一头，both则是全都要。我实际项目里用最多的是both，因为它几乎覆盖了“进得来、留得住”的全部需求。但要注意，forwards并不会影响延迟期间的状态。如果动画有2秒延迟，你又想让元素提前显示第一帧，那必须用backwards或both，否则动画开播前元素会以默认样式暴露出来，视觉上非常突兀。

3.2 实战：为什么你的按钮动画总“闪回”

我见过太多“hover时放大、鼠标一移开就瞬间恢复原样”的例子。很多同学第一反应是写@keyframes，但写完之后发现，hover放大的动画倒是实现了，移开时却“啪”地跳回去。看这段代码：

css复制.btn {
  animation: pulse 0.3s ease;
}

.btn:hover {
  animation: pulse 0.3s ease forwards;
}

@keyframes pulse {
  from { transform: scale(1); }
  to   { transform: scale(1.1); }
}

问题出在哪？hover时，animation重新应用，元素从scale(1)动画到scale(1.1)，forwards让它停在1.1。可鼠标一移开，animation不再匹配选择器，整个动画被移除，元素立刻回到默认样式scale(1)，没有任何过渡。这不是bug，是animation和transition的本质区别：transition描述的是“状态变化时的过渡”，animation描述的是“一条独立的时间线播放”。两者可以配合，但别搞混。

正确的做法是：这种“状态切换”场景，优先用transition而不是animation：

css复制.btn {
  transform: scale(1);
  transition: transform 0.3s ease;
}

.btn:hover {
  transform: scale(1.1);
}

如果你确实想用@keyframes做更复杂的分段动画，那就给“进入”和“离开”分别定义两个keyframes，并在hover时切换类名，但维护成本高，非必要不推荐。这里的核心教训是：fill-mode只能解决“动画播完之后停在哪”，解决不了“状态切换之后的过渡平滑”问题。很多人把这两件事混在一起，结果越写越乱。

4. 执行次数与逆向播放：动画节奏的双核心

4.1 iteration-count 的边界情况

animation-iteration-count管的是动画播几遍，支持整数、小数和infinite。整数最直观，写2就是完整播2遍。infinite是无限循环，加载动画和心理暗示类的动效几乎都会用到。真正容易被忽略的是小数——比如animation-iteration-count: 1.5，动画会先完整播放1遍，再播放第二遍的前半段，最终停在50%关键帧的位置。如果此时加上forwards，元素就静止在“第二遍播到一半”的画面里，这种特性偶尔能做出“播到一半停住”的定格效果，但可读性比较差，我很少在生产环境使用小数，因为后来维护代码的人根本猜不到1.5这个数字是怎么算出来的。

还有一个场景值得提醒：动画播完之后，如果你没有设置fill-mode，元素会立刻回到动画前的状态，哪怕你设置了iteration-count: 3。这意味着“播完3遍后瞬间跳回起点”是浏览器默认行为。你要么加forwards或both让它停在终点，要么让它无限循环，没有第三种默认选择。很多人在这里踩坑，写了3遍循环，结果最后“啪”地一下回到原点，还以为是自己keyframes写错了，其实只是没想清楚“播放结束后谁说了算”这个问题。

4.2 逆向播放四种方向的本质

animation-direction有四个值：normal、reverse、alternate、alternate-reverse。normal就是正向播放。reverse是反向播放，但注意，reverse不只是“倒着放”，它连时间函数也会被镜像。比如ease-in在reverse下，实际表现会接近ease-out。这个细节很关键，因为你写ease-out想表达的“慢出”效果，在reverse下可能要写成ease-in才能等价，否则动画手感会完全不一样。alternate是最常被低估的一个方向，它的行为是：第1次正向，第2次反向，第3次正向，如此交替。alternate-reverse则是先反向，再正向，后面继续交替。

要理解alternate的价值，最好的例子是呼吸灯。理想效果是透明度从1到0.4，再平滑回到1。如果只用normal配合infinite，动画每次播完都会从1直接跳到0.4，视觉上就是“闪断”。用alternate配合infinite就完全平滑：

css复制.breath {
  animation: breathe 2s ease-in-out infinite alternate;
}

@keyframes breathe {
  from { opacity: 1; }
  to   { opacity: 0.4; }
}

这里第一次迭代是从1到0.4，第二次迭代自动反转为从0.4到1，来回往复，中间没有任何跳变。direction和iteration-count的组合，本质上是在规划动画在时间轴上“来回走路”的路线。理解了这一点，很多“动画不顺畅”的问题都能迎刃而解。

4.3 组合范例：加载动画的三种节奏

写几个可以直接抄走的组合模式。第一种，三点跳跳乐。三个圆点用同一个keyframes，通过负delay错开启动时间，配合alternate实现往返运动。为了让三个点看起来像“接龙”，动画周期0.6s，负延迟分别取0、-0.2s、-0.4s，正好把周期三等分。第二种，循环进度条。一个滑块从左到右循环滑动，适合做“加载中”的提示条：

css复制.progress-bar {
  width: 200px;
  height: 6px;
  background: #eee;
  border-radius: 3px;
  overflow: hidden;
}

.progress-bar::before {
  content: "";
  display: block;
  width: 60px;
  height: 100%;
  background: #4f8cff;
  border-radius: 3px;
  animation: slide 1.2s ease-in-out infinite;
}

@keyframes slide {
  0%   { transform: translateX(-60px); }
  100% { transform: translateX(200px); }
}

第三种，心跳图标。用alternate让缩放自然回到原位，而不是跳变：

css复制.heart {
  animation: heartbeat 0.8s ease-in-out infinite alternate;
}

@keyframes heartbeat {
  from { transform: scale(1); }
  to   { transform: scale(1.15); }
}

这三个模式都有一个共同点：没有用JS，没有复杂的timing-function，全靠iteration-count和direction的组合做到了自然循环。理解了它们，再看市面上大多数loading动效，思路基本都能拆出来。

5. 组合实战：一个可复用的“消息通知”动画

5.1 需求拆解

前面讲了一堆参数，现在把它们串起来做一个完整的东西：页面右下角弹出一个消息通知。需求是这样的：通知从右侧滑入，滑入过程约0.45秒；滑入后保持静止展示约3秒；展示结束后向右滑出，滑出后不可见，不能遮挡其他内容；整个过程最好在一条CSS动画时间线上完成，不靠JS去控制多个阶段的切换。

这个需求里，滑入、停留、滑出三个阶段其实是在一个@keyframes里按顺序发生的。我们需要把4.5秒的总时长按比例分配给三个阶段。计算一下：滑入0.45秒，占总时长10%；展示3秒，约占66%左右；滑出剩约1.05秒，占24%左右。这样四舍五入后关键帧百分比大概落在0%、10%、75%、100%。为什么滑出要给1.05秒而不是和滑入一样0.45秒？因为消失的动效如果太快，会显得像“弹走”而不是“滑走”，稍微放慢一点，视觉上更有从容退出感。

5.2 完整代码与逐步解析

先看纯CSS时间轴方案：

css复制.notice {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 300px;
  padding: 16px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateX(120%);
  animation: notifyFlow 4.5s ease-in-out both;
}

@keyframes notifyFlow {
  0% {
    transform: translateX(120%);
    opacity: 0;
  }
  10% {
    transform: translateX(0);
    opacity: 1;
  }
  75% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(120%);
    opacity: 0;
  }
}

这里有几个关键点需要解释一下。animation-fill-mode用的是both，动画开始前，元素保持0%帧的样式，也就是右侧外移且透明；动画结束后，保持100%帧的样式，依然是右侧外移且透明。换句话说，不管动画前还是动画后，通知都不会出现在可视区域，只在播放过程中“露脸”。用both还有一个隐藏的好处：如果页面加载后过了很久才触发动画，元素不会在等待期间暴露在页面上。很多人只写animation不写fill-mode，于是动画开始前元素待在初始位置，直到delay结束才突然跳到第一帧，这就很难看了。

为什么transform用translateX(120%)而不是translateX(100%)？因为100%会让元素的右边刚好进入父容器可视范围，但元素本身还有width和box-shadow，视觉上仍然能看到一部分。120%可以确保元素彻底移出父容器可视范围。如果父容器不是body，需要根据实际宽度和阴影范围调整这个百分比。纯CSS方案很适合“展示时长固定”的场景，缺点是，想调整展示时长就必须改整个duration，所有百分比都得跟着推算，维护起来不太直观。

5.3 扩展思路：把“进入等待退出”做成组件

如果展示时长是动态的，比如“消息提示1.5秒消失，错误提示5秒消失”，纯CSS方案就不好维护了。更实用的做法是拆成JS控制状态类。CSS部分用transition：

css复制.notice {
  transform: translateX(120%);
  opacity: 0;
  transition: transform 0.45s ease-in, opacity 0.45s ease-in;
}

.notice.show {
  transform: translateX(0);
  opacity: 1;
}

.notice.hide {
  transform: translateX(120%);
  opacity: 0;
}

JS部分：

javascript复制const el = document.querySelector('.notice');
el.classList.add('show');

setTimeout(() => {
  el.classList.add('hide');
}, 3000);

这个方案把“展示时长”做成了setTimeout的参数，清晰明了，也方便封装成组件。你甚至可以写一个工厂函数，接收content、duration、type等参数，内部动态创建DOM节点，再自动调用classList切换和setTimeout清理。这样一套下来，基本就是一个小型通知组件了。

我个人的建议是：如果动画只是“一次性播完”，纯CSS方案完全够用；如果动画需要根据业务状态反复进出，用状态类+transition更可控。fill-mode、delay这些属性在纯CSS方案里依然重要，但它们的职责是保证时间线之外的状态干净，而不是替JS接管所有动态逻辑。

6. 常见问题排查与调试技巧

6.1 动画“卡在中间”怎么办

最经典的问题是：动画播完了，但视觉上停在了一个奇怪的位置，或者干脆跳到初始状态。排查顺序一般是三步。第一步，看fill-mode。如果动画结束后元素回到初始状态，说明没设置forwards或both，如果你希望停在终点，直接补forwards。第二步，看iteration-count。如果是小数，比如1.5，动画会在第二次播放到一半时停下，配合forwards，元素就会定格在“半途”，想要完整停住，用整数。第三步，看direction。如果是alternate，且iteration-count是偶数，比如2，那么动画最后一次是反向播放，结束位置在起点而不是终点，很多人没意识到“偶数次交替会在起点收尾”。

这个“起点/终点”问题最坑，因为CSS动画的from和to在交替模式下会被反复反转。建议写复杂的交替动画之前，先在纸上画出“第几次正向、第几次反向、最终停在哪”，再决定要不要加forwards。别嫌土，这个方法能帮你省掉一半的排查时间。

6.2 多个动画叠加时的顺序问题

一个元素可以同时绑定多个动画，用逗号分隔：

css复制.el {
  animation: fadeIn 1s ease both, bounce 2s ease 1s infinite alternate;
}

但这里有个很容易踩的坑：多个动画同时作用于同一个属性时，后声明的动画会覆盖先声明动画的同名属性。举个例子，fadeIn和bounce如果都在@keyframes里改了transform，那么后声明的bounce会覆盖fadeIn里的transform。fadeIn里的opacity动画则不受影响，因为opacity和transform是不同的属性。我的经验是：让每个动画只负责一个独立的属性。透明度变化单独写一个keyframes，位移变化单独写一个，颜色变化再单独写一个，这样叠加时互不干扰。如果不得不让两个动画操作同一个属性，那就只能接受“后写覆盖先写”的现实，并把两个动画的播放时间错开。

6.3 实用调试姿势与避坑经验

Chrome的DevTools里有一个专门的Animations面板，入口在More tools -> Animations。打开之后，浏览器会自动记录当前页面所有动画，你可以暂停、拖动时间线、逐帧查看每一帧的样式。调试关键帧动画时，这个面板比console好用十倍。我常用的调试技巧是：开发时把animation-duration临时改大，比如一个0.5s的动画改成3s，这样能看清每个阶段的变化，等确认关键帧和时机没问题了再改回来。这个方法成本最低，而且对任何动画参数都适用。

另一个容易遇到的问题：hover或媒体查询状态切换时，动画被重新触发，视觉上表现为“闪一下”。原因是浏览器把animation从“匹配选择器”到“不匹配选择器”再“重新匹配”的过程，解释为“重新开始动画”。解决办法是不要在基础样式上一直挂载animation，只在需要的状态类上添加。我踩过一个具体的坑：给轮播图指示器写了animation: progress 2s linear infinite，结果点击切换时整条进度条重置，后来改成只有激活状态才挂载动画才解决。

还有无障碍的问题。如果产品面向大量用户，记得照顾对动效敏感的人群。在根样式里加一段：

css复制@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

这段代码能显著减少动画闪烁和诱发的身体不适，成本很低，但对用户体验提升明显。

最后再分享一个我这些年做CSS3动画总结出的经验：永远把“结构状态”和“动效状态”分开。结构状态决定元素“该在哪、该不该可见”，动效状态只负责“怎么动过去”。把这个原则贯彻下去，fill-mode、delay这些参数会变得特别好理解，因为它们本质上就是在管理“动”和“停”之间的边界。CSS3动画的进阶方向还很多，比如steps()步进函数、will-change的性能优化、scroll-driven动画，都是值得继续深挖的话题。这一篇先把时间线、延迟、状态保持、循环和反向这几个核心概念讲透，打下了底子，后面的内容才有得聊。