如何在CSS中实现多元素同步动画_keyframes与animation-delay结合

通过@keyframes定义动画，结合animation-delay控制时序，可实现多元素同步或有序动画。1. 共用@keyframes并设置不同animation-delay，使元素依次触发，如三个方块分别延迟0s、0.2s、0.4s淡入；2. 使用CSS变量（如--delay-step）统一管理延迟节奏，提升维护性，通过calc()计算各元素延迟；3. 多元素设相同animation-delay（默认0s）可实现完全同步动画，如心跳脉动效果；4. 结合JavaScript动态添加类名，统一触发带CSS变量延迟的动画，实现精确编排。核心在于合理组织动画逻辑与时机控制。

在CSS中实现多个元素的同步或有序动画，关键在于合理使用 @keyframes 定义动画逻辑，并通过 animation-delay 控制每个元素的启动时机。虽然“同步”通常指同时开始，但更多实际场景中我们希望看到有节奏的协调动画，比如依次入场、交错出现等。下面介绍几种结合 @keyframes 与 animation-delay 实现多元素协调动画的方法。

1. 使用相同的 @keyframes，设置不同的 animation-delay

多个元素可以共用同一个动画定义，通过为每个元素设置不同的延迟时间，实现错落有致的动画效果。

示例：三个方块依次淡入

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.box {
animation: fadeIn 0.6s ease-out;
}
.box:nth-child(1) { animation-delay: 0s; }
.box:nth-child(2) { animation-delay: 0.2s; }
.box:nth-child(3) { animation-delay: 0.4s; }

这样三个元素使用相同动画，但依次延迟0.2秒启动，形成连贯的进入动效。

2. 利用 CSS 变量统一控制动画节奏

为了提高可维护性，可以用 CSS 自定义属性统一管理延迟和持续时间。

.container {
  --delay-step: 0.15s;
}
.item {
animation: slideUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.item:nth-child(1) { animation-delay: calc(var(--delay-step)  0); }
.item:nth-child(2) { animation-delay: calc(var(--delay-step)  1); }
.item:nth-child(3) { animation-delay: calc(var(--delay-step) * 2); }
@keyframes slideUp {
to { opacity: 1; transform: translateY(0); }
}

通过调整 --delay-step，可快速改变整体动画节奏，无需逐个修改。

3. 实现真正“同步”动画

如果多个元素需要完全同时开始动画，只需让它们的 animation-delay 一致（默认为 0），并使用相同的 @keyframes。

例如：

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.heart, .star {
animation: pulse 1s infinite;
animation-delay: 0s; / 明确设为0，确保同步 /
}

只要动画时长、延迟、触发时机一致，就能实现视觉上的同步。

4. 结合 JavaScript 动态控制动画触发

对于更复杂的同步需求，比如等待某个条件后再统一启动所有动画，可通过 JS 添加类名来批量触发。

CSS 部分：

.animated-element {
  opacity: 0;
  transition: opacity 0.4s;
}
.animated-element.active {
animation: fadeIn 0.6s forwards;
animation-delay: calc(0.1s * var(--order));
}

HTML 中为每个元素设置顺序变量：

JS 在合适时机添加 active 类：

document.querySelectorAll('.animated-element').forEach(el => {
  el.classList.add('active');
});

这样所有元素会在 JS 执行时刻统一开始动画，延迟由 --order 控制，实现精确编排。

基本上就这些。通过 @keyframes 定义动画行为，配合 animation-delay 调整启动时间，再结合 CSS 变量或 JS 控制，就能灵活实现从完全同步到有序交错的各种多元素动画效果。关键是保持动画逻辑清晰，便于维护和调整。不复杂但容易忽略细节。