本文介绍如何仅用 HTML 和 CSS 实现一组重叠 元素（如“1/8”“2/8”…）按顺序逐个淡入、短暂停留后淡出的循环动画效果，解决元素重叠显示、动画不同步等常见问题。
本文介绍如何仅用 html 和 css 实现一组重叠 `
` 元素（如“1/8”“2/8”…）按顺序逐个淡入、短暂停留后淡出的循环动画效果，解决元素重叠显示、动画不同步等常见问题。
要实现「1/8 → 2/8 → … → 8/8」逐个平滑浮现并自然过渡的动画效果，关键在于精准控制每个元素的动画时序与生命周期，而非依赖长周期单一动画。原方案中 animation: pFadeIn 10s 导致所有元素在 10 秒内完成同一段动画，即使设置了 animation-delay，也因动画总时长远超单次展示所需时间，造成视觉堆积与重叠。
以下是优化后的完整实现方案：
✅ 正确思路
- 每个
<p></p>使用短周期动画（如3s）：包含「完全可见 → 保持 → 淡出」三阶段； - 通过
animation-delay错开起始时间，形成流水式呈现； - 所有元素绝对定位重叠，仅靠
opacity控制显隐，避免布局干扰； - 动画结束后自动重置（
animation-fill-mode: both确保初始态为opacity: 0）。
? 完整代码示例
<div class="bottom-style"> <p class="bottom-style-p">1 / 8</p> <p class="bottom-style-p">2 / 8</p> <p class="bottom-style-p">3 / 8</p> <p class="bottom-style-p">4 / 8</p> <p class="bottom-style-p">5 / 8</p> <p class="bottom-style-p">6 / 8</p> <p class="bottom-style-p">7 / 8</p> <p class="bottom-style-p">8 / 8</p> </div>
.bottom-style {
position: relative;
height: 2em; /* 为绝对定位提供参考尺寸 */
}
.bottom-style-p {
position: absolute;
top: 0;
left: 0;
margin: 0;
opacity: 0;
animation: pFadeIn 3s ease-in forwards;
}
@keyframes pFadeIn {
0% {
opacity: 0;
}
15% {
opacity: 1; /* 快速淡入 */
}
50% {
opacity: 1; /* 稳定显示（占总时长一半） */
}
100% {
opacity: 0; /* 平滑淡出 */
}
}
/* 依次错开动画起始时间：0s, 2s, 4s, ..., 14s */
.bottom-style-p:nth-child(1) { animation-delay: 0s; }
.bottom-style-p:nth-child(2) { animation-delay: 2s; }
.bottom-style-p:nth-child(3) { animation-delay: 4s; }
.bottom-style-p:nth-child(4) { animation-delay: 6s; }
.bottom-style-p:nth-child(5) { animation-delay: 8s; }
.bottom-style-p:nth-child(6) { animation-delay: 10s; }
.bottom-style-p:nth-child(7) { animation-delay: 12s; }
.bottom-style-p:nth-child(8) { animation-delay: 14s; }⚠️ 注意事项
-
forwards是关键：确保动画结束时保留opacity: 0状态，避免闪回； -
总循环周期 = 最后一个元素的
delay + duration= 14s + 3s = 17s，若需无缝循环，可配合animation-iteration-count: infinite，但注意第 8 项淡出后需等待 17s 才重新开始——如需真正循环播放，建议将整个动画封装为@keyframes多段序列或使用 JavaScript 触发重播； - 若「/ 8」部分需常驻显示（如仅数字变化），应将分母拆分为独立静态元素，仅对分子做动画，提升语义性与可维护性；
- 移动端需添加
-webkit-animation前缀以保障兼容性（现代浏览器已普遍支持，可按需省略）。
该方案完全基于 CSS，无 JS 介入，性能高效、语义清晰，适用于加载指示器、步骤提示、倒计时标签等轻量交互动效场景。
