第 8 章 过渡与动画

直觉起点

、、、、共同构成本页的观察坐标。把时间函数、离散帧、状态连续性和坐标变换分开推导，保证运动传达因果，并为减少动态偏好提供静态状态。本页覆盖 7 个公开目录条目。《CSS 揭秘》的价值不只是给出效果代码，而是展示怎样从限制条件中找到更少依赖的机制；所以每个示例都必须同时保留基线、增强和失败解释。

六阶段解题链

1. 定义状态端点

先写视觉与交互契约，不写具体属性。固定 DOM、文本、视口、字体和输入方式，预测无增强样式时应保留的内容、尺寸、焦点和阅读顺序。

2. 选择连续或离散

查明目标效果属于盒生成、背景绘制、边框、滤镜、字体、布局还是合成阶段。只选能直接解释目标的机制，并注明规范能力与实现边界。

3. 设计时间函数

构造最小代码，删除重复数值、镜像状态和额外 DOM。先预测计算值与绘制区域，再运行正常样本，记录首个产生目标效果的声明。

4. 控制变换原点

只改变一个变量，例如容器宽度、文本长度、背景、字体、输入方式或动态偏好。停止在首个偏离点，不用更多覆盖把失败截图修平。

5. 处理中途反转

关闭关键能力，检查自然回退是否仍可读、可操作、可布局。增强方案不能反向破坏基线，也不能以颜色、动画或装饰替代语义。

6. 验证减少动态

清除故障后重放同一 DOM，确认没有旧内联样式、重复常量、隐藏焦点或层叠残留。把通过条件写成以后可以自动或人工复查的证据。

核心机制深挖

把时间函数、离散帧、状态连续性和坐标变换分开推导，保证运动传达因果，并为减少动态偏好提供静态状态。 解题时先区分结构事实、计算样式、绘制结果和交互状态：结构决定语义与可访问名称，级联和布局产生计算值与使用值，背景、边框、阴影、滤镜再参与绘制，动画与输入只改变状态。把这些阶段混在一起，往往会用多余 DOM 修背景、用固定尺寸修布局、用不可见原生控件修状态，最终难以维护。

本页签发不变量是：动画的端点、时间和坐标都可解释；中途反转不跳变，减少动态模式下仍能辨认最终状态。 对每个方案都要问四个问题：不支持高级能力时剩下什么；内容变长时谁负责尺寸；键盘与触摸是否仍能完成任务；删除故障声明后是否回到同一基线。只有四问都有可复现答案，技巧才从演示升级为工程方案。

出版社目录逐项讲解

第8章 过渡与动画

本章把运动分为连续插值与离散帧，时间函数决定变化速度，变换原点与嵌套坐标决定路径。动画必须从清楚的静态端点出发，并在 prefers-reduced-motion 下保留状态而非信息消失。

证据记录从“定义状态端点”开始：先写出未增强时的可用结果，再只加入一个 CSS 能力，比较计算样式、绘制边界、内容语义、输入状态和失败回退。若方案需要复制尺寸、隐藏真实控件、依赖固定内容或无法解释的层叠补丁，就回到最小样本重做。

42 缓动效果

cubic-bezier 描述速度曲线而非空间路径；自然回弹可由超出 0 到 1 的控制点产生。先观察位移、速度和停靠端点，再调整曲线；交互反馈不应因过长回弹延迟完成感。

证据记录从“选择连续或离散”开始：先写出未增强时的可用结果，再只加入一个 CSS 能力，比较计算样式、绘制边界、内容语义、输入状态和失败回退。若方案需要复制尺寸、隐藏真实控件、依赖固定内容或无法解释的层叠补丁，就回到最小样本重做。

43 逐帧动画

steps 把连续时间切成离散帧，配合精灵图背景位移得到逐帧动画。帧宽、总帧数、终点是否重复必须一致；隐藏或暂停时停在完整帧，减少动态环境显示代表性静态帧。

证据记录从“设计时间函数”开始：先写出未增强时的可用结果，再只加入一个 CSS 能力，比较计算样式、绘制边界、内容语义、输入状态和失败回退。若方案需要复制尺寸、隐藏真实控件、依赖固定内容或无法解释的层叠补丁，就回到最小样本重做。

44 闪烁效果

闪烁可用离散的 opacity 关键帧实现，但频率和对比变化可能造成可访问风险。仅用于短暂、非关键提示，提供停止方式并避免高频；重要状态同时用文本或图标表达。

证据记录从“控制变换原点”开始：先写出未增强时的可用结果，再只加入一个 CSS 能力，比较计算样式、绘制边界、内容语义、输入状态和失败回退。若方案需要复制尺寸、隐藏真实控件、依赖固定内容或无法解释的层叠补丁，就回到最小样本重做。

45 打字动画

容器宽度从零按字符数以 steps 增长，并用不换行与溢出隐藏模拟逐字出现；光标可由边框动画提供。比例字体会让步长不等，内容变化需同步字符数；减少动态时直接显示完整文本。

证据记录从“处理中途反转”开始：先写出未增强时的可用结果，再只加入一个 CSS 能力，比较计算样式、绘制边界、内容语义、输入状态和失败回退。若方案需要复制尺寸、隐藏真实控件、依赖固定内容或无法解释的层叠补丁，就回到最小样本重做。

46 状态平滑的动画

播放态和暂停态共享同一个动画或过渡，让中途反转从当前计算值继续，而不是跳回预设起点。避免同时修改互不兼容的关键帧和内联样式；快速连续触发是主要边界样本。

证据记录从“验证减少动态”开始：先写出未增强时的可用结果，再只加入一个 CSS 能力，比较计算样式、绘制边界、内容语义、输入状态和失败回退。若方案需要复制尺寸、隐藏真实控件、依赖固定内容或无法解释的层叠补丁，就回到最小样本重做。

47 沿环形路径平移的动画

对象绕圆心运动可用旋转父层再反向旋转子层保持朝向，或用现代 motion path。transform-origin 定义半径，嵌套变换顺序决定姿态；0、半周、整周与减少动态状态都要核对。

证据记录从“定义状态端点”开始：先写出未增强时的可用结果，再只加入一个 CSS 能力，比较计算样式、绘制边界、内容语义、输入状态和失败回退。若方案需要复制尺寸、隐藏真实控件、依赖固定内容或无法解释的层叠补丁，就回到最小样本重做。

方案比较矩阵

最小可运行实验

.loader {
  animation: pulse 900ms ease-in-out infinite alternate;
}
@keyframes pulse {
  to {
    opacity: 0.35;
    transform: scale(0.92);
  }
}
@media (prefers-reduced-motion: reduce) {
  .loader {
    animation: none;
  }
}

<article class="secret component" data-enhanced>
  <button class="action" type="button">验证基线与增强</button>
  <p>用长内容、窄容器、键盘和能力缺失重放同一结构。</p>
</article>

book: CSS 揭秘
page: csec-08-transitions-animations
sample: baseline | enhanced | failure | recovery
toc_entries: 7
semantic_content_preserved: true
fallback_operable: true
first_divergence: null

常见误区与故障注入

四类样本与验收

目录证据：第8章 过渡与动画、42 缓动效果、43 逐帧动画、44 闪烁效果、45 打字动画、46 状态平滑的动画、47 沿环形路径平移的动画。本页不复制原书正文，而是按公开目录独立重构问题、机制、实验与验收，确保每个标题都有可执行学习证据。

练习

小结

• cubic-bezier：连接“定义状态端点”与规范依赖。
• steps：连接“选择连续或离散”与最小基线。
• keyframes：连接“设计时间函数”与增强机制。
• transform-origin：连接“控制变换原点”与边界故障。
• prefers-reduced-motion：连接“处理中途反转”与恢复证据。
• 7 个本页目录条目已经全部进入问题、机制、实现与验收链。
• 现代便利写法只作对照，原书 2015 年方案的机制身份与回退路径保持清楚。

术语表