使用 React 实现 CSS 关键帧动画

@keyframes 规则通过指定时间线中各个时刻的属性值来描述多步骤动画，可以使用 from/to，也可以使用 0%、50%、100% 这样的百分比。

与过渡不同，关键帧可以描述复杂的多阶段运动，使动画无需每一步都发生状态变化即可自行运行。

您可以使用 animation 属性应用一组关键帧：animation: slideIn 400ms ease forwards。它将名称、持续时间、时间函数和填充模式组合在一起。

forwards 填充模式会在动画结束后保留元素最后一个关键帧的值，防止元素突然跳回起始状态。

在 React 中，通常会在状态变为 true 时添加一个包含 animation 声明的类。例如，添加 is-entering 会在元素挂载或标志切换的瞬间启动关键帧。

这样可以将动画逻辑保留在 CSS 中，而 React 只负责决定何时附加该类。

animation-fill-mode 控制动画运行前后应用哪些样式。forwards 会保留最后一个关键帧，backwards 会在延迟期间应用第一个关键帧，而 both 会同时执行这两种行为。

如果没有 forwards，元素淡入到可见状态后，动画完成时就会跳回不可见状态。

animation-direction: alternate 会在每次迭代中先正向播放动画，再反向播放。与 animation-iteration-count: infinite 结合后，它可以创建平滑的来回运动，例如脉动或呼吸效果。

这对于加载指示器或细微的吸引注意力的运动非常实用。

animation-play-state 可以是 running 或 paused。您可以通过 React 状态驱动它，例如切换类名，在悬停时暂停跑马灯。

由于它是暂停而不是重置，动画会从停止的准确位置继续。

关键帧动画在首次应用其类名时只播放一次；再次添加相同的类名不会重新启动它。React 中最简洁的做法是更改元素的 key，让 React 重新挂载一个全新的节点，从头播放动画。

例如，在提示框上使用 key={count}，每次 count 增加时都会重新挂载提示框。

为了舒适或无障碍体验，一些用户会在其 OS 中启用减少动态效果。请将非必要动画放在 @media (prefers-reduced-motion: reduce) 中，并在那里禁用或缩短这些动画。

遵循这项偏好可以让您的界面更具包容性，并避免引发不适。

若要在元素进入视口时为其添加动画，请在 useEffect 中使用 IntersectionObserver。当条目变为可见时，您可以设置状态，从而添加动画类名。

这样无需让繁重的滚动监听器在每一帧运行，也能实现滚动显示效果。

animation-delay 可以错开每个关键帧动画的开始时间。为项目列表设置逐渐增加的延迟，可以让项目依次播放，呈现编排好的显示效果。

您可以在 React 中使用 style={{ animationDelay: i * 80 + 'ms' }} 为每个项目计算延迟。

对于由交互驱动的简单双状态变化，请使用过渡；当您需要多步骤运动、循环播放，或需要独立于状态切换运行的动画时，请使用关键帧。

两者都是纯 CSS，因此 React 只负责决定何时附加类名，具体帧则由浏览器处理。

请检验您对关键帧行为的理解。

您学习了如何定义 @keyframes、使用 animation 简写属性应用动画、控制填充模式和方向、暂停并重新触发动画，以及使用 IntersectionObserver 在滚动时显示元素。

您还了解了如何遵循 prefers-reduced-motion，实现更具无障碍性的动态效果。