freeCodeCamp 实战：用 animation-iteration-count 的 infinite 值实现无限循环 CSS 动画

本文以 freeCodeCamp 课程中「Animate Elements Continually Using an Infinite Animation Count」这道 HTML/CSS 代码挑战为主体，讲解 CSS 动画属性 animation-iteration-count 的取值规则与工作原理，并结合挑战的初始代码、参考解答与自动测试断言，完整演示如何让一个弹跳小球从"播放 3 次即停止"变为"无限循环弹跳"。读完本篇，你将掌握该属性的语义、与 animation-name、animation-duration 的协作关系，以及在课程源码仓库中定位、验证此类挑战实现的方法。

挑战在 freeCodeCamp 课程体系中的位置

这道挑战是 freeCodeCamp「Responsive Web Design（响应式网页设计）」超级模块中「Applied Visual Design（应用视觉设计）」模块的组成部分。从课程结构文件可以看到，该超级模块由 7 个 block 按顺序编排，Applied Visual Design 排在第三位：

{
  "blocks": [
    "basic-html-and-html5",
    "basic-css",
    "applied-visual-design",
    "applied-accessibility",
    "responsive-web-design-principles",
    "css-flexbox",
    "css-grid"
  ]
}

• 超级模块定义：responsive-web-design.json
• 模块挑战清单：applied-visual-design.json

在 applied-visual-design.json 的 challengeOrder 数组中，本挑战（id: 587d78a8367417b2b2512ae3）位于 CSS 动画教学序列的中间位置，前后挑战构成了完整的学习路径：

顺序	挑战标题	作用
前置	Learn How the CSS @keyframes and animation Properties Work	讲解 animation-name、animation-duration 与 @keyframes 规则
前置	Create Movement Using CSS Animation	用 top/left 偏移量在关键帧中制造位移
本篇	Animate Elements Continually Using an Infinite Animation Count	引入 animation-iteration-count，实现无限循环
后续	Make a CSS Heartbeat using an Infinite Animation Count	综合运用 infinite 循环制作跳动的心形
后续	Animate Elements at Variable Rates / Change Animation Timing with Keywords	进阶：变速与动画时序关键字

该挑战的文档主体位于 587d78a8367417b2b2512ae3.md。其 YAML frontmatter 中声明了 challengeType: 0，对照共享包中的挑战类型枚举（packages/shared/src/config/challenge-types.ts 中 const html = 0），可以确认这是一道在 HTML/CSS 编辑器中作答的代码型挑战：系统提供初始代码（seed），学习者修改代码，平台用自动化断言校验结果，并给出参考答案（solutions）。课程侧对挑战文件的字段约束（challengeType 取值范围 0–33 等）定义在 challenge-schema.js 中。

核心概念：animation-iteration-count 控制动画循环次数

animation-iteration-count 是 CSS 动画属性之一，用于控制一段动画要循环播放多少次。原始文档给出的最小示例是：

animation-iteration-count: 3;

在这个取值下，动画会完整播放 3 次（3 个 iteration）后停止。若希望动画持续不断地运行，只需把该值设为关键字 infinite：

animation-iteration-count: infinite;

需要注意该属性的协作前提：它本身只决定"循环次数"，动画的"内容"由 @keyframes 规则定义，"节奏"由 animation-duration（单次时长）决定，"身份"由 animation-name 与 @keyframes 的名字关联起来。这三者缺一不可——如果只设置了 animation-name 却没有有效的 animation-duration（默认值 0s），动画不会呈现任何视觉效果。

挑战的初始代码（seed）逐段解读

该挑战的初始代码如下（来自原文档 --seed-contents-- 部分，完整保留）：

<style>

  #ball {
    width: 100px;
    height: 100px;
    margin: 50px auto;
    position: relative;
    border-radius: 50%;
    background: linear-gradient(
      35deg,
      #ccffff,
      #ffcccc
    );
    animation-name: bounce;
    animation-duration: 1s;
    animation-iteration-count: 3;
  }

  @keyframes bounce{
    0% {
      top: 0px;
    }
    50% {
      top: 249px;
      width: 130px;
      height: 70px;
    }
    100% {
      top: 0px;
    }
  }
</style>
<div id="ball"></div>

这段代码由一个 100x100 像素的"球"（#ball）和一段 bounce 关键帧规则组成，各部分职责如下：

• 造型：border-radius: 50% 把正方形变为圆形；linear-gradient(35deg, #ccffff, #ffcccc) 用 35 度方向的线性渐变（浅青到浅粉）赋予球体色彩层次——这是本模块前面「Create a Gradual CSS Linear Gradient」等挑战所学内容的综合应用。
• 可动画的定位前提：position: relative 是必要的，因为关键帧中通过 top 偏移量制造位移；只有定位元素（或绝对/fixed 定位）的 top 值变化才会产生可见的移动效果。这一点在紧邻的前置挑战「Create Movement Using CSS Animation」（587d78a7367417b2b2512ae1.md）中已经专门讲解过。
• 动画配置：animation-name: bounce 把元素绑定到名为 bounce 的 @keyframes 规则；animation-duration: 1s 让单次弹跳耗时 1 秒；animation-iteration-count: 3 则让整段动画播放 3 次后停止——这正是本题要求修改的"病灶"。
• @keyframes bounce 关键帧：0% 时球在 top: 0px（起始位置）；50% 时球下落到 top: 249px，同时尺寸从 100x100 变为 130x70（变宽变扁）；100% 时回到 top: 0px。50% 处的"压扁"效果是经典动画原理中的 squash & stretch（挤压与拉伸），模拟球触地时的形变，让弹跳看起来更有物理感。

任务目标与参考解答

原始文档的 instructions 要求：为了让球在右侧持续弹跳（keep the ball bouncing on a continuous loop），把 animation-iteration-count 属性值改为 infinite。

参考解答（来自原文档 --solutions-- 部分，完整保留）只改动了一处，即 #ball 中的迭代次数：

<style>
  #ball {
    width: 100px;
    height: 100px;
    margin: 50px auto;
    position: relative;
    border-radius: 50%;
    background: linear-gradient(
      35deg,
      #ccffff,
      #ffcccc
    );
    animation-name: bounce;
    animation-duration: 1s;
    animation-iteration-count: infinite;
  }

  @keyframes bounce{
    0% {
      top: 0px;
    }
    50% {
      top: 249px;
      width: 130px;
      height: 70px;
    }
    100% {
      top: 0px;
    }
  }
</style>
<div id="ball"></div>

对比 seed 与 solution 可知，这道题考察的正是"单点属性修改"的最小改法：@keyframes 与其余样式全部保持不变，唯一的差异是第 54 行附近的 animation-iteration-count: 3; 变为 animation-iteration-count: infinite;。

平台如何验证：基于计算样式的断言

课程文档 --hints-- 部分同时给出了官方提示与自动化测试所用的校验代码，这是理解"平台如何判定作答正确"的关键证据：

const ballElement = document.querySelector('#ball');
const ballStyle = window.getComputedStyle(ballElement);
assert.equal(ballStyle?.animationIterationCount, 'infinite');

可以看到，测试并不检查源码文本，而是通过 window.getComputedStyle 读取元素最终的计算样式，断言 animationIterationCount（对应 CSS 属性 animation-iteration-count 的驼峰命名形式）严格等于字符串 'infinite'。这种校验方式意味着：只要属性最终生效且值为 infinite 即可通过（例如写在 #ball 规则中、或经由等效的样式声明），而仅改注释或不生效的选择器都无法通过。

纵深理解：infinite 循环在课程中的延续应用

把视角放大到整个动画教学序列，会发现 animation-iteration-count: infinite 不是孤立的知识点，而是后续实践的基础：

1. 心跳效果（Heartbeat）：紧随其后的挑战「Make a CSS Heartbeat using an Infinite Animation Count」（587d78a8367417b2b2512ae4.md）要求同时为 .back 背景层和 .heart 心形元素两处都添加 animation-iteration-count: infinite。该示例中有两套并行的 @keyframes（beat 负责 transform: scale() 缩放，backdiv 负责背景色脉动），测试断言同样使用 getComputedStyle 分别校验两个元素的 animationIterationCount 是否均为 infinite。这说明一个页面可以同时挂多个独立动画，各自的循环次数互不影响。
2. 变速与计时：再往后，「Animate Elements at Variable Rates」「Change Animation Timing with Keywords」等挑战继续叠加 animation-duration 差异化和 ease 等计时关键字，与 infinite 循环配合形成更复杂的连续动效。
3. fill-mode 相关：模块清单中还包含「Modify Fill Mode of an Animation」挑战（58a7a6ebf9a6318348e2d5aa），讨论 animation-fill-mode 对动画暂停/结束后状态的影响。从源码结构看，infinite 循环天然绕开了"动画结束后回到什么状态"的问题，因为动画永远不会结束；理解这一点有助于体会 fill-mode 的价值场景。

综合来看，CSS 的动画行为由 8 个 animation-* 长写属性（以及 animation 简写）共同描述，前置挑战「Learn How the CSS @keyframes and animation Properties Work」（587d78a7367417b2b2512adf.md）中即提到"一共有八个 animation 属性"，并先行讲解了最关键的 animation-name 与 animation-duration；本挑战则是这一系列属性中专门负责"循环语义"的成员。

小结与实操要点

• animation-iteration-count 取正整数时，动画播放对应次数后停止；取 infinite 时进入无限循环。
• 该属性必须与 animation-name、animation-duration、@keyframes 规则配合才能呈现可见动画；被动画元素若依赖 top/left 等偏移产生位移，需要 position: relative（或 absolute/fixed）作为前提。
• 本挑战的验证逻辑基于计算样式（getComputedStyle().animationIterationCount === 'infinite'），因此修改应保证属性真正作用于目标元素。
• 关键帧中的 50% 处同时修改 width/height 制造挤压形变，是 freeCodeCamp 该模块"让弹跳更像物理运动"的惯用手法。
• 可在仓库中进一步延伸阅读：挑战原文 587d78a8367417b2b2512ae3.md、心跳挑战 587d78a8367417b2b2512ae4.md、模块清单 applied-visual-design.json 与课程模式 challenge-schema.js。