动画

在网页设计不断演进的过程中，构建更加直观和富有感染力的界面效果始终是我们关注的重点。CSS动画则成为了现代前端开发不可或缺的工具之一，它能够让网页元素从静态走向动态，赋予页面更多的表现力。通过合理运用动画，开发者不仅可以提升用户的交互体验，还可以更好地传递界面反馈与操作意图。

与基本的CSS过渡效果不同，动画不仅仅表现为两个状态之间的平滑切换，更可以详细定义元素在不同时刻的状态变化。例如，我们能按照时间轴，为动画制定多个"关键帧"，逐步控制元素的不同展示效果，让动画更加丰富与灵活。

实验室

动画与过渡的本质区别

在前端领域，提到CSS动画，总会联想到“过渡”这一概念。理解两者之间的差异，对于合理选择和运用至关重要。

CSS过渡（transition）主要依赖于某种用户操作，比如鼠标悬停、点击按钮等。当这些交互发生时，某些CSS属性值由一个状态渐变到另一个状态，属性的变化过程则由过渡去修饰其速度与方式。例如，用户将鼠标移入按钮，背景色可以从白色平滑地渐变为蓝色，这正是过渡的典型应用场景。

而CSS动画（animation）则更具主动性和灵活性。动画无需依赖用户的某一操作，可以在页面加载或特定时机根据设定自动运行。通过关键帧，开发者能够精细定义动画每一阶段的具体样式，控制整个动画流程。更重要的是，动画能够设置循环播放或者控制播放次数，为元素带来更多层次和变化的动态表现力。

通过这个对比我们可以看到，过渡更像是被动的响应机制，而动画则是主动的表演者。动画可以创造出超越简单过渡的丰富效果，比如让元素在动画过程中经历多种颜色变化，或者沿着复杂的路径移动。

无障碍设计考虑

在追求视觉效果的同时，我们必须时刻牢记动画可能对某些用户造成负面影响。某些动画效果可能会引发用户的身体不适，特别是对于那些患有癫痫或前庭功能障碍的用户来说，快速闪烁或大幅度的运动可能会导致严重的健康问题。

为了确保我们的网页对所有用户都是友好的，我们应该特别注意动画的设计。快速的闪烁、剧烈的旋转或者大幅度的位置变化都可能成为问题。我们需要谨慎使用这些效果，特别是当动画会无限循环或者包含强烈的视觉对比时。

幸运的是，现代浏览器提供了相应的解决方案。用户可以通过设置系统偏好来表明他们对动画的敏感程度。我们可以通过CSS的媒体查询功能来检测用户的这些偏好，并相应地调整或禁用某些动画效果。

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

通过这样的设计方式，我们既能够为大多数用户提供丰富的视觉体验，又能够尊重那些需要减少动画的用户的需求。这是一种包容性的设计理念，确保我们的网页不会因为动画效果而排斥某些用户群体。

关键帧动画

现在我们来深入了解CSS动画的核心机制：关键帧。关键帧就像是动画的蓝图，它定义了元素在动画过程中的关键状态点。通过在这些关键点之间定义属性值，浏览器能够自动计算出中间的过渡效果。

关键帧是通过@keyframes规则来定义的。这个规则允许我们为动画创建一个可重用的模板，我们可以为这个模板命名，然后在需要的地方引用它。每个关键帧规则包含动画名称和一系列关键帧块，每个块定义了动画序列中的特定时刻。

|
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
 
.fading-element {
  animation-name: fade-out;
  animation-duration: 2s;
}

关键帧选择器的使用

在定义关键帧时，我们使用关键帧选择器来指定动画过程中的特定时间点。这些选择器通常是百分比值，表示动画完成度的比例。from关键字相当于0%，而to关键字相当于100%。

关键帧选择器让我们能够精确控制动画的每一个阶段。我们可以在动画的任何时间点设置元素的属性值，而不仅仅是在开始和结束。这样的灵活性让我们能够创造出复杂的动画效果。

|
@keyframes slide-and-fade {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  25% {
    opacity: 0.5;
    transform: translateX(-50px);
  }
  50% {
    opacity: 

关键帧的命名和标识符

为关键帧动画命名时，我们需要遵循CSS标识符的命名规则。名称可以包含字母、数字、连字符和下划线，但不能以数字开头。需要注意的是，我们应该避免使用CSS动画属性中已有的关键字作为动画名称，以防止出现混淆和冲突。

|
/* 有效的动画名称 */
@keyframes slide-in { ... }
@keyframes fade_to_black { ... }
@keyframes rotate-360 { ... }
@keyframes scale_up_2x { ... }
 
/* 使用引号的命名方式 */
@keyframes "complex-animation" { ... }
@keyframes "fade-in-out" { ... }

可动画属性和限制

跟过渡一样，并不是所有的CSS属性都可以被动画化。有些属性由于其固有的特性，无法在动画过程中平滑过渡。比如，display属性就无法被动画化，因为它在不同值之间没有中间状态。

当我们尝试在关键帧中使用不可动画的属性时，这些属性会被简单地忽略，不会产生任何错误信息。这意味着动画的其他部分仍然会正常工作，只是那些不可动画的属性会被跳过。

|
@keyframes smooth-transition {
  from {
    width: 100px;
    height: 100px;
    background-color: #ff0000;
    border-radius: 0;
    transform: rotate(0deg);
    opacity: 1;
  }
  to

JavaScript与关键帧的交互

CSS关键帧动画（@keyframes）不仅可以通过静态的CSS样式表进行定义，也支持在运行时通过JavaScript进行动态的读取、修改、插入与删除。通过操作文档的样式表对象（CSSStyleSheet）及其中的关键帧规则（CSSKeyframesRule），开发者可以实现高级的动画控制与交互效果。 例如，可以动态添加、修改、或移除关键帧，从而根据用户操作或应用逻辑，实时调整动画的行为。

当需要对已有的动画效果进行交互式增强，或者实现响应用户输入的动画编辑器时，这种能力尤为重要。CSSKeyframesRule接口为我们提供了诸如appendRule、deleteRule、findRule等方法，允许精细化管理每一个关键帧节点，使CSS动画具备了极强的可编程性，成为现代Web动态视觉交互的关键组成部分。

|
// 获取样式表中的关键帧规则
const styleSheet = document.styleSheets[0];
const keyframesRule = Array.from(styleSheet.cssRules)
  .find(rule => rule.type === CSSRule.KEYFRAMES_RULE && rule.name === 'myAnimation');
 
if (keyframesRule) {
  // 查找特定的关键帧
  const keyframe50 = keyframesRule.

掌握了关键帧的基础概念和使用方法后，我们就可以开始探索如何将这些关键帧应用到实际的元素上，并控制动画的各种行为特性。在接下来的部分中，我们将学习动画属性的详细设置和控制方法。

将动画应用到元素

在定义好关键帧动画（@keyframes）之后，下一步就是将其应用于具体的 HTML 元素。这一过程依赖于一组动画相关的 CSS 属性，通过合理配置这些属性，可以精准控制动画的执行流程、节奏、次数、起始延迟、方向和填充模式等细节。 CSS 动画的核心属性主要包括：

• animation-name：指定关键帧动画的名称，将定义的动画与需要应用的元素关联起来。
• animation-duration：设置动画完成一个周期所需的时间，单位可以是s（秒）或ms（毫秒）。
• animation-timing-function：定义动画在每一个周期是如何加速和减速的，例如线性、缓入缓出等。
• animation-delay：指定动画在应用到元素后延迟多久开始执行。
• animation-iteration-count：设置动画播放的次数，可以为具体数值，也可以设为infinite实现无限循环。
• animation-direction：决定动画在每轮播放时是否反向运行。
• animation-fill-mode：规定动画在执行前后，元素的样式状态。

动画名称 (animation-name)

animation-name 属性是 CSS 动画系统的基础属性之一，用于告知浏览器该元素应绑定哪一组关键帧动画。该属性的值必须与已通过 @keyframes 声明的动画名称完全一致。浏览器据此识别并将相应的帧序列应用到目标元素上，实现动画效果的驱动。例如：

|
.animated-element {
  animation-name: fade-in;
}

在实际开发中，合理命名动画有助于代码维护与协作，同时也是实现元素动态效果的第一步。

|
@keyframes slide-in {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
 
.animated-box {
  animation-name: slide-in;

动画持续时间

animation-duration 属性用于精确定义一个CSS动画从开始到结束单个完整周期所需的时长。该属性的取值为时间数值，可使用秒（s）或毫秒（ms）作为单位。例如，1s 代表1秒，500ms 代表500毫秒。

|
.quick-animation {
  animation-name: fade-in;
  animation-duration: 0.5s;  /* 快速动画 */
}
 
.slow-animation {
  animation-name: slide-down;
  animation-duration: 3s;    /* 慢速动画 */
}
 
.very-slow {
  animation-name: complex-movement;
  animation-duration: 5000ms; /* 5秒动画 */

动画迭代

animation-iteration-count 属性用于精确指定动画的播放次数，是 CSS 动画控制中至关重要的参数。其取值可以为正整数、小数，或特殊关键字 infinite。默认值为 1，即动画仅执行一个周期后停止；指定为具体数值（如 3）时，动画会按设定次数重复播放；而设置为 infinite 时，动画将无限循环，直至手动终止或元素被移除。

此外，animation-iteration-count 支持小数（如 2.5），此时动画将完整播放两次，然后按动画关键帧进度播放到 50% 即提前结束。该属性通常与 animation-direction、animation-fill-mode 等配合，能够实现复杂的动画节奏和循环策略，广泛应用于轮播图、加载特效、视觉动效等场景。合理设置该属性，有助于提升用户体验及界面活力。

|
.once {
  animation-name: blink;
  animation-duration: 1s;
  animation-iteration-count: 1;  /* 执行一次 */
}
 
.thrice {
  animation-name: shake;
  animation-duration: 0.5s;
  animation-iteration-count: 3;  /* 执行三次 */
}
 
.forever {

动画方向

animation-direction 属性用于精确控制 CSS 动画在每次迭代中的播放方向。它支持多个取值，允许动画以正向（normal）、反向（reverse）、交替正反向（alternate）或交替反向起始（alternate-reverse）等多种方式进行。 比如，设置为 normal 时，动画每轮都按照关键帧从 0% 到 100% 顺序播放；设置为 reverse 则会从 100% 到 0% 反向渲染；alternate 让动画首轮正向播放，下一轮反向，交替进行； 而 alternate-reverse 则从反向开始，随后每轮交替。在实现循环弹跳、回弹、往返等复杂动效时，合理运用 animation-direction 可大大提升动画的自然流畅度和表现力，是 CSS 动画控制不可或缺的参数。

|
.normal-play {
  animation-name: slide;
  animation-direction: normal;  /* 正常方向：0% -> 100% */
}
 
.reverse-play {
  animation-name: slide;
  animation-direction: reverse;  /* 反向播放：100% -> 0% */
}
 
.alternate-play {
  animation-name: slide;
  animation-direction: alternate;  /* 交替：第1次正向，第2次反向 */
  animation-iteration-count: infinite

动画延迟

animation-delay 属性用于精确控制动画何时开始执行，它指定元素应用动画后延迟多长时间再启动动画过程。该属性既支持正值（如 1s, 500ms），表示在等待指定的延迟后，动画才会从起始关键帧开始运动；也支持负值（如 -2s），表示动画立即生效，但从动画时间轴的相应进度位置切入播放。通过为不同元素设置不同的 animation-delay，可以实现错峰启动、节奏分明的“交错动画”，常见于瀑布流、加载骨架屏和批量弹入/弹出等高级交互动效。合理利用延迟，可以让整体动画的节奏更具层次与动感，是设计复杂队列型动画时不可或缺的工具之一。

|
.delayed-start {
  animation-name: fade-in;
  animation-duration: 2s;
  animation-delay: 1s;  /* 等待1秒后开始 */
}
 
.staggered-animations {
  animation-name: slide-up;
  animation-duration: 1s;
}
 
.staggered-animations:nth-child(2) {
  animation-delay: 0.2s

时间函数

animation-timing-function 属性决定了动画在关键帧之间过渡时的速度变化曲线（即插值方式），用于控制动画运动的加速度和节奏。该属性可以接受关键字（如 linear, ease, ease-in, ease-out, ease-in-out）以应用一组常见的缓动效果，也可以通过 cubic-bezier(x1,y1,x2,y2) 形式自定义贝塞尔曲线，精确描述任意复杂的运动节奏。其本质是通过贝塞尔曲线函数规定动画属性值从起点到终点的变化速率，影响用户感知的动画“快慢张弛”。

|
.ease-example {
  animation-name: move;
  animation-timing-function: ease;  /* 慢开始，快中间，慢结束 */
}
 
.linear-example {
  animation-name: move;
  animation-timing-function: linear;  /* 匀速 */
}
 
.ease-in-example {
  animation-name: move;
  animation-timing-function: ease-in

填充模式

animation-fill-mode属性用于定义CSS动画在播放前后，元素应用关键帧样式的方式。具体来说，它决定动画未开始前（动画延迟阶段）和结束后，元素是保持自身原始样式，还是采用关键帧定义的样式。有四个常用取值：

• none（默认值）：动画结束后，元素会还原为动画未发生前的样子，不会保留首帧或末帧的样式。
• forwards：动画完成后，元素会保持在最后一个关键帧（即动画终态）的样式，不会回到初始状态。
• backwards：如果动画设置了延迟，当动画尚未正式开始前，元素会立即应用第一个关键帧的样式。
• both：元素将同时应用forwards和backwards的行为——即延迟期间采用首帧样式，动画结束后保持末帧样式。

|
.none-mode {
  animation-name: color-change;
  animation-fill-mode: none;  /* 默认值，动画前后不应用关键帧值 */
}
 
.forwards-mode {
  animation-name: color-change;
  animation-fill-mode: forwards;  /* 动画结束后保持最后的关键帧值 */
}
 
.backwards-mode {
  animation-name: color-change;
  animation-fill-mode: backwards;  /* 动画开始前应用第一帧的值 */
  animation-delay: 2

播放状态

animation-play-state 属性是 CSS 动画的一个重要控制属性。它用于指定动画的播放状态，可以取值为 running （动画正常运行）或 paused（动画暂停）。通过动态更改该属性，可以实现在用户交互时随时暂停或恢复动画效果，非常适合需要暂停、继续等控制的复杂交互场景。

|
.running-animation {
  animation-name: spin;
  animation-play-state: running;  /* 默认值，动画正常播放 */
}
 
.paused-animation {
  animation-name: spin;
  animation-play-state: paused;   /* 动画暂停 */
}

动画简写

与我们之前学过的很多css属性一样，动画属性也能支持我们简写。

animation 属性是一个功能强大的 CSS 动画复合型简写属性。它允许开发者在单一声明中，按照严格规定的顺序，依次设置动画相关的多个属性，包括：动画名称（animation-name）、持续时间（animation-duration）、缓动函数（animation-timing-function）、延迟（animation-delay）、循环次数（animation-iteration-count）、方向（animation-direction）、填充模式（animation-fill-mode）以及播放状态（animation-play-state）。
其标准书写顺序如下：

|
animation: <name> <duration> <timing-function> <delay> <iteration-count> <direction> <fill-mode> <play-state>;

其中，除名称和持续时间为必填，其余参数均可选，未指定时会采用对应的默认值。正确使用 animation 简写属性，不仅能提升样式表的可读性和维护性，还可避免因省略关键参数而产生的易错情况，例如将时长（duration）和延迟（delay）顺序搞混。因此，建议在使用简写时，优先列出常用且有变动的值，并遵循官方属性顺序，以保证动画效果的准确性和一致性。

|
/* 展开形式 */
.element {
  animation-name: slide-in;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 0.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;

通过掌握我们上面的这些动画属性，我们就已经能够创建出丰富多彩的动画效果。在下一部分中，我们将探索动画事件系统和高级功能，这将让我们能够通过JavaScript与动画进行更深入的交互，并创建更加复杂和精确的动画效果。

动画事件系统

在CSS动画中，事件机制为我们提供了对动画过程的细致把控。通过监听动画生命周期中的不同时刻，我们可以实现更为灵活的交互控制。例如，当动画刚刚启动、完成、重复或被意外中断时，浏览器都会触发相应的事件。这使得我们能够根据动画的具体状态，动态地执行自定义逻辑。

常见动画事件类型

CSS动画主要关联四种事件，每种事件在触发时都会包含丰富的信息。事件对象（event）通常包含如animationName（动画名称）、elapsedTime（动画已运行的时间，单位为秒）和pseudoElement（关联的伪元素名称，若有的话）等只读属性，方便我们根据实际需求作进一步处理。

|
const element = document.querySelector('.animated-element');
 
// 动画开始事件
element.addEventListener('animationstart', (event) => {
  console.log('动画开始:', event.animationName);
});
 
// 动画结束事件
element.addEventListener('animationend', (event) => {
  console.

动画事件的时间特性

深入理解 CSS 动画相关事件（如 animationstart、animationiteration、animationend）在动画生命周期中具体的触发时机，对于精确控制页面动效和实现复杂交互逻辑十分重要。

每类事件的触发均以动画状态、动画属性（如延迟/时长/迭代次数）以及关键时间点为基础。只有掌握这些事件的专业时间特性，才能有效利用事件处理器，在动画启动、每次迭代以及动画最终结束等各关键节点，正确地执行相应的业务逻辑和界面操作，从而大幅提升动画交互的准确性与可维护性。

|
// 对于这个动画配置：
// animation-duration: 1s;
// animation-iteration-count: 3;
// animation-delay: 2s;
 
element.addEventListener('animationstart', () => {
  // 在延迟结束后立即触发（2秒后）
});
 
element.addEventListener('animationiteration', () => {
  // 在第1秒和第2秒结束时触发（总共2次）
  // 不会在最后一次迭代后触发
});
 
element.addEventListener('animationend', () => {
  // 在最后一次迭代结束后触发（5秒后）
});

动画链

“动画链”是指通过精确控制多个动画的时序，使它们依次连续地执行。每个动画会在上一个动画完成后有序地开始，仿佛形成了一条依时而动的链条。这类动画通常通过设置多个 keyframes，以 CSS 多重动画的方式（配合不同的延迟 animation-delay）、或借助 JavaScript 在动画事件（如 animationend）回调中动态触发下一个动画，从而实现严密的时序衔接。动画链特别适合展示步骤流程、依次引导、复杂状态切换等场景，可以极大地提升界面动效的表现力与可控性。

|
@keyframes red-phase {
  from { background-color: white; }
  to { background-color: red; }
}
 
@keyframes orange-phase {
  from { background-color: red; }
  to { background-color: orange; }
}
 
@keyframes yellow-phase {
  from

动画迭代延迟

CSS 标准动画属性（包括 animation 及其各子属性）并未原生支持“每次动画迭代之间插入延迟”的能力，即你无法通过一个专门的 animation-iteration-delay 属性来定义每轮动画间的等待时间。
但对于需要迭代间隔的动画效果，前端开发中常见两类专业解决方案：

1. 关键帧内置延缓：通过调整 @keyframes 动画关键帧的分布，将“多余”的静止状态或样式值填入后半段百分比区间，相当于人为拉长动画的最后阶段时间，实现视觉上的“暂停”，间接达到每轮动画之间延迟的目的。这在纯CSS方案中应用最广，也最兼容，适合简单迭代场景。

2. JavaScript 事件驱动重置：配合 animationend 或 animationiteration 事件监听，自行控制每一轮动画的启动，通过 JS 定时器（如 setTimeout）在每次迭代后触发下一次动画，从而在两轮之间插入任意长度的真实延时。这种方式粒度更细，适用于复杂交互或动态效果。

|
/* 创建一个3次迭代的动画，每次迭代之间有4秒延迟 */
@keyframes grow-with-delay {
  0%, 80% {
    transform: scale(1);
    background-color: blue;
  }
  20% {
    transform: scale(1.5);
    background-color: green;
  }
  80.01% {
    background-color: 

逐帧动画

“步骤时间函数”（step timing functions）是 CSS 动画领域中的一种专业时间控制方法。它允许开发者将动画过程切割成若干个严格离散的阶段，每个阶段内动画属性保持静止，仅在阶段交界一跃切换。一条基于步骤的动画，其帧间过渡是突变、非连续的，而非诸如 ease、linear 等普通时间函数的平滑缓动。这样就可以精准模拟“逐帧变化”的效果，或让元素按照网格、分帧式逻辑规律变化，广泛应用于：帧动画（frame-based animation）、精灵表动画（sprite animation）、计步数字表盘、倒计时读数跳变等高级动画场景。

通过设置 animation-timing-function: steps(N, [jump-term])，开发者能够指定总分为 N 步，配合 start、end、jump-none 等参数，进一步专业定制动画的跳变时机与状态序列。

|
@keyframes color-steps {
  from { background-color: red; }
  to { background-color: blue; }
}
 
.step-animation {
  animation-name: color-steps;
  animation-duration: 2s;
  animation-timing-function: steps(5, end);  /* 5个步骤，从结束位置开始 */
}
 
/* 其他步骤函数 */

动画性能优化

动画性能是现代 Web 前端开发中不可忽视的核心议题。优劣动画不仅影响页面的流畅度和交互体验，还直接关联硬件资源消耗和移动端电池寿命等全局效能。理解不同 CSS 属性动画对浏览器渲染流水线的影响，掌握相应的优化技巧，是构建高水准 UI 动画的专业基础。

不同的动画属性会触发不同层级的浏览器渲染过程（如布局、回流、重绘与合成），对性能的消耗差距极大。一般而言，transform（变形）和opacity（透明度）等属性归属“合成层”优化路径，能最小化主线程阻塞及无谓的重渲/回流，是性能首选；而像width、height、margin、padding、top/left等布局型属性的动画则会强迫浏览器反复计算布局和重排，尤其在复杂页面或低端移动设备上，极易导致动画卡顿、掉帧。

浏览器动画流水线：UI 线程与 GPU 加速

现代浏览器的页面渲染主要分为两大部分：主线程（UI Thread）和合成线程（Compositor Thread），其中后者可调用 GPU 进行硬件加速。CSS 动画的实际执行分为以下几个阶段：

1. 样式计算（Style） —— 解析 CSS 并应用样式规则。
2. 布局（Layout, Reflow） —— 重新计算文档流布局结构。
3. 绘制（Paint） —— 每个节点生成位图像素。
4. 分层与合成（Layer/Compositing） —— 各可加速 layer 由合成线程（通常由 GPU 负责）独立合成，最终推送到屏幕。

动画属性的专业选择，决定了动画变更会停留在哪一级渲染阶段。只有 transform 和 opacity 能直接跳过布局和重绘，只触发合成层的高效位移，全部由 GPU 加速完成，实现真正意义上的“60FPS级丝滑动画”。而其它会影响几何结构的属性（如尺寸、位置、颜色等）则每帧都需走完整个渲染流水线，极易造成性能瓶颈。 因此我们建议：

• 首选 transform/opacity 实现平移、缩放、旋转、淡入淡出等效果；
• 尽量避免对会导致回流和重绘的 CSS 属性进行动画；
• 善用现代浏览器的硬件加速机制（如 will-change 提示，即提前告知浏览器某属性将要变化），能进一步提升动画流畅度。

|
/* 高性能动画属性 - 这些通常在GPU上处理 */
.smooth-animation {
  transform: translateX(100px);      /* 位置变换 */
  opacity: 0.8;                     /* 透明度 */
  transform: scale(1.2);            /* 缩放 */
  transform: rotate(45deg);         /* 旋转 */
}
 
/* 复合变换 - 在同一个transform属性中组合多个变换 */
.efficient-transform {

will-change：预优化提示

will-change属性允许我们提前告诉浏览器哪些属性可能会发生变化，让浏览器可以提前进行优化准备。

|
/* 基本使用 */
.animated-element {
  will-change: transform, opacity;
  /* 告诉浏览器transform和opacity属性会发生变化 */
}
 
/* 多个属性 */
.complex-animation {
  will-change: transform, filter, background-position;
}
 
/* 特殊值 */
.scroll-optimization {
  will-change: scroll-position;  /* 优化滚动 */
}
 
.content-optimization {
  will-change: contents;        /* 优化内容变化 */
}

动画与display属性的交互

display属性的变化对动画有特殊的影响，理解这种交互对于创建正确的动画行为很重要。

|
.disappearing-element {
  animation: fade-out 1s ease-in forwards;
}
 
/* 当display设置为none时，动画会立即停止 */
.hidden-element {
  display: none;  /* 动画会被终止 */
}
 
/* 重新显示元素会重启动画 */
.visible-again {
  display: block;  /* 动画从头开始 */
}

小结

本部分我们系统学习了CSS动画的核心知识与实用技巧：从基本概念入门，区分动画与过渡，到精确掌控关键帧、动画属性和高级事件。你应该已经了解了动画的各类参数（如名称、时长、迭代、方向、延迟、时间函数等），并学会利用动画事件、步骤时间函数等复杂效果。

在我们的日常实践中，请务必始终关注动画的性能表现和用户体验：优先使用GPU加速属性，兼顾无障碍媒体查询，保证功能完整。CSS动画不仅让界面更具表现力，其精细的交互与性能优化也成为现代Web开发的重要组成部分。 带着我们本堂课的知识去实践和创新，你将在实际项目中创造更加灵动和有吸引力的Web体验，探索CSS动画在前端领域的广阔可能。

实战练习

练习1：动画与过渡的区别

问题1： 下列哪个选项最准确地描述了CSS动画与过渡的主要区别？

• A. 动画只能用JavaScript实现，过渡只能用CSS实现
• B. 动画可以循环播放，过渡只能播放一次
• C. 动画可以定义多个关键帧，过渡只能在两个状态之间切换
• D. 动画比过渡性能更好

问题2： 如果你想要创建一个元素从透明变为不透明，然后又回到透明的循环动画，你应该使用哪种CSS技术？

练习2：关键帧动画基础

问题1： 下面的CSS代码中，哪个关键帧定义是正确的？

|
/* A */
@keyframes slide {
  0% { transform: translateX(0); }
  50% { transform: translateX(50px); }
  100% { transform: translateX(100px); }
}
 
/* B */
@keyframes slide {
  start { transform: translateX(

问题2： 创建一个让元素在2秒内从红色背景变为蓝色背景，然后再变回红色的循环动画。

|
@keyframes color-cycle {
  0% { background-color: red; }
  50% { background-color: blue; }
  100% { background-color: red; }
}
 
.element {
  animation: color-cycle 2s infinite;
}

练习3：动画属性配置

问题1： 下列哪个CSS属性可以让动画反向播放？

• A. animation-play-state
• B. animation-direction
• C. animation-fill-mode
• D. animation-timing-function

问题2： 如何创建一个动画，让元素在延迟1秒后开始播放2秒，然后无限循环，每次循环都交替方向播放？

|
.element {
  animation-name: my-animation;
  animation-duration: 2s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

|
.element {
  animation: my-animation 2s 1s infinite alternate

问题3： animation-fill-mode属性的forwards值有什么作用？

练习4：动画事件系统

问题1： 下列哪个动画事件在动画每次迭代完成后触发（但不是在最后一次迭代后）？

• A. animationstart
• B. animationend
• C. animationiteration
• D. animationcancel

问题2： 编写JavaScript代码，监听一个元素的动画结束事件，并在动画结束后显示"动画完成"的提示。

|
const element = document.querySelector('.animated-element');
 
element.addEventListener('animationend', (event) => {
  console.log('动画完成！');
  console.log('动画名称:', event.animationName);
  console.log('经过时间:', event.elapsedTime);
});

练习5：性能优化

问题1： 下列哪个CSS属性在动画时通常不会触发浏览器的重绘（repaint）？

• A. width
• B. background-color
• C. transform
• D. margin-left

问题2： will-changeCSS属性的主要作用是什么？

|
.element {
  will-change: transform, opacity;
}

练习6：步骤时间函数

问题1： steps(4, end)时间函数会如何影响动画的播放？

问题2： 创建一个模拟时钟指针的动画，使用步骤时间函数让指针每秒跳动一次（假设有12个刻度）。

|
@keyframes clock-tick {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
 
.clock-hand {
  animation: clock-tick 12s steps(12, end) infinite;
}

练习7：综合应用

问题1： 创建一个按钮的点击反馈动画，要求：

• 点击后按钮放大到1.2倍
• 同时背景色变为绿色
• 动画持续0.3秒
• 动画结束后保持放大和绿色状态
• 考虑性能优化

|
@keyframes button-feedback {
  to {
    transform: scale(1.2);
    background-color: #28a745;
  }
}
 
.button {
  transition: all 0.3s ease;
  will-change: transform; /* 性能优化 */
}
 
.button:active {
  animation: button-feedback 0.3s ease

问题2： 解释为什么下面的代码可能不是最佳实践，并提供改进方案：

|
.problematic {
  animation: slide 2s infinite;
}
 
@keyframes slide {
  from { left: 0; }
  to { left: 100px; }
}

|
.improved {
  animation: slide 2s infinite;
  will-change: transform; /* 性能优化 */
}
 
@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}
 
/* 考虑无障碍性 */
@media

这个动画展示了元素如何在不同的时间点表现出不同的透明度和位置状态。

这些属性都可以平滑地进行动画过渡：尺寸、颜色、圆角、旋转、透明度等。

通过JavaScript我们可以访问和检查关键帧规则的内容。

这个例子为元素应用了一个名为slide-in的动画，让元素从左侧滑入并逐渐显示。

这些事件让我们能够精确控制动画的生命周期。

动画事件按照特定的时间表触发，每个事件都有其独特的触发条件。

通过精心计算延迟时间，我们可以让多个动画依次执行。

通过在关键帧中包含"等待"阶段，我们可以模拟迭代间的延迟。

steps()函数将动画时间划分为指定数量的等分步骤。

这些属性通常会被GPU加速，不会阻塞UI线程。

这里使用了transform: scale()而不是改变width/height来避免触发回流，使用了forwards填充模式来保持动画结束状态，并添加了will-change进行性能优化。

使用transform: translateX()代替left可以利用GPU加速，避免回流。添加will-change提示浏览器优化，并通过媒体查询尊重用户的减少动画偏好设置。