动画方向、填充模式与迭代
使用 fill-mode 控制动画播放方向、循环次数和最终状态。
动画方向、填充模式与迭代 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。
动画迭代次数属性
控制动画重复的次数。请使用 infinite 实现持续循环。
<div class="spinner"></div>
<div class="pulse"></div>
动画方向属性
控制交替循环时的播放方向：
normal— 每次迭代都正向播放reverse— 反向播放alternate— 正向播放后反向播放，交替进行alternate-reverse— 反向播放后正向播放
<div class="bounce"></div>
动画填充模式属性
定义元素在动画开始之前和结束之后的状态：
none— 默认值，恢复到原始状态forwards— 动画完成后保持最后一个关键帧的状态backwards— 延迟期间应用第一个关键帧both— 同时应用反向和正向填充
正向填充模式
最常见的用法是：动画完成后让元素保持动画结束时的状态：
<p class="item">I fade in and stay visible</p>
反向填充模式
存在延迟时，backwards 会让元素在延迟期间从第一个关键帧的状态开始，避免动画开始前短暂闪现原始状态：
<p class="item">Starts invisible during the delay</p>
双向填充模式
both 会结合正向和反向填充，是一种最可预测的选项，适合不应在动画前后闪现的动画元素。
动画延迟属性
延迟动画的开始时间。负值延迟会让动画从中途开始，这对于同步多个动画很有用：
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
错峰动画模式
使用第 n 个子元素延迟实现仅使用 CSS 的错峰效果：
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
暂停与恢复
通过更改 animation-play-state，使用 JavaScript 切换动画状态：
<div class="spinner" id="js-spinner"></div>
<button onclick="const s=document.getElementById('js-spinner').style; s.animationPlayState = s.animationPlayState === 'paused' ? 'running' : 'paused';">Pause / Resume</button>
重置动画
要重新播放 CSS 动画，请移除并重新添加类。浏览器会应用一种技巧：在移除和添加之间强制重新排版。
<div class="box" id="reset-box"></div>
<button onclick="const el=document.getElementById('reset-box'); el.classList.remove('animate'); void el.offsetWidth; el.classList.add('animate');">Replay Animation</button>
负值动画延迟
使用负值延迟让动画从播放中途开始，这对于同步的背景图案或应显示为已在运动中的循环元素很有用。
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
快速检查
哪个动画填充模式值会让元素在动画结束后保持最后一个关键帧的状态？
回顾
animation-iteration-count: infinite 会无限循环。animation-direction: alternate 会往返播放。animation-fill-mode: forwards 会保持最终状态。animation-fill-mode: both 是最稳妥的选项。请使用负值延迟错开同步动画。
常见问题解答
「动画方向、填充模式与迭代」课时是免费的吗？
是的 — 「动画方向、填充模式与迭代」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。
「动画方向、填充模式与迭代」这节课中我会学到什么？
使用 fill-mode 控制动画播放方向、循环次数和最终状态。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「动画方向、填充模式与迭代」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 CSS Academy 课中编写并运行代码吗？
能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。