通过@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 实现多元素协调动画的方法。
多个元素可以共用同一个动画定义，通过为每个元素设置不同的延迟时间，实现错落有致的动画效果。
示例：三个方块依次淡入
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
<p>.box {
animation: fadeIn 0.6s ease-out;
}</p><p>.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秒启动，形成连贯的进入动效。
为了提高可维护性，可以用 CSS 自定义属性统一管理延迟和持续时间。
立即学习“前端免费学习笔记（深入）”；
.container {
--delay-step: 0.15s;
}
<p>.item {
animation: slideUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}</p><p>.item:nth-child(1) { animation-delay: calc(var(--delay-step) <em> 0); }
.item:nth-child(2) { animation-delay: calc(var(--delay-step) </em> 1); }
.item:nth-child(3) { animation-delay: calc(var(--delay-step) * 2); }</p><p>@keyframes slideUp {
to { opacity: 1; transform: translateY(0); }
}
通过调整 --delay-step，可快速改变整体动画节奏，无需逐个修改。
如果多个元素需要完全同时开始动画，只需让它们的 animation-delay 一致（默认为 0），并使用相同的 @keyframes。
例如：
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
<p>.heart, .star {
animation: pulse 1s infinite;
animation-delay: 0s; /<em> 明确设为0，确保同步 </em>/
}
只要动画时长、延迟、触发时机一致，就能实现视觉上的同步。
对于更复杂的同步需求，比如等待某个条件后再统一启动所有动画，可通过 JS 添加类名来批量触发。
CSS 部分：
.animated-element {
opacity: 0;
transition: opacity 0.4s;
}
<p>.animated-element.active {
animation: fadeIn 0.6s forwards;
animation-delay: calc(0.1s * var(--order));
}
HTML 中为每个元素设置顺序变量：
<div class="animated-element" style="--order: 1"></div> <div class="animated-element" style="--order: 2"></div>
JS 在合适时机添加 active 类：
document.querySelectorAll('.animated-element').forEach(el => {
el.classList.add('active');
});
这样所有元素会在 JS 执行时刻统一开始动画，延迟由 --order 控制，实现精确编排。
基本上就这些。通过 @keyframes 定义动画行为，配合 animation-delay 调整启动时间，再结合 CSS 变量或 JS 控制，就能灵活实现从完全同步到有序交错的各种多元素动画效果。关键是保持动画逻辑清晰，便于维护和调整。不复杂但容易忽略细节。
以上就是如何在CSS中实现多元素同步动画_keyframes与animation-delay结合的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
553
收藏
