本文详解如何仅用 html 和 css 实现多个文本在固定位置依次执行“上浮进入→完全显示→下移淡出”的循环轮播动画，确保无缝衔接、无重叠、无错位。
本文详解如何仅用 html 和 css 实现多个文本在固定位置依次执行“上浮进入→完全显示→下移淡出”的循环轮播动画，确保无缝衔接、无重叠、无错位。
要实现多个文本（如 “UTILISATION ILLIMITÉE”、“SANS CONTACT” 等）在同一容器内、同一位置，以统一动效风格逐个浮现并轮播，关键在于精准控制 @keyframes 的时间分段与 animation-delay 的协同逻辑——而非简单复用相同持续时间的动画。
✅ 核心原理：12 秒总周期 × 4 项文本 = 完美轮播
假设共 4 个文本项，每项需独占 3 秒可见期（含入场、高光、退场），其余 9 秒完全隐藏，则整个动画周期应为 4 × 3s = 12s。每项通过 animation-delay 错开 3 秒启动，形成接力效果：
- 第 1 项：
delay: 0s→ 在0–3s段活跃 - 第 2 项：
delay: 3s→ 在3–6s段活跃 - 第 3 项：
delay: 6s→ 在6–9s段活跃 - 第 4 项：
delay: 9s→ 在9–12s段活跃
因此，单个文本的 @keyframes 必须在其 自身 12 秒生命周期内完成全部动作：
-
0%：起始状态（完全透明 + 下移 100%） -
12.5%（即 1.5s 处）：到达顶部、完全不透明（视觉峰值） -
25%（即 3s 处）：回归透明 + 下移，彻底退出视野 -
25%–100%：全程保持隐藏（不参与动画）
对应的关键帧定义如下：
立即学习“前端免费学习笔记（深入）”；
@keyframes coolAnimation {
0%, 25% {
opacity: 0;
transform: translateY(100%);
}
12.5% {
opacity: 1;
transform: translateY(0);
}
}✅ 布局要点：绝对定位 + 隐藏溢出
为避免文本堆叠或高度塌陷，必须将所有 .coolText 设为 position: absolute，并统一锚定于容器顶部（默认 top: 0），同时确保父容器 #textContainer 启用 overflow: hidden：
#textContainer {
position: relative;
overflow: hidden; /* 关键：裁剪移出区域 */
height: 120px; /* 建议显式设高，避免布局抖动 */
}
.coolText {
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
margin: 0;
font-size: 40px;
line-height: 1.2;
color: #000;
font-family: 'Myriad Pro', Arial, sans-serif;
animation: coolAnimation 12s ease-in-out infinite;
}⚠️ 注意：原代码中存在拼写错误
roverflow: hidden应修正为overflow: hidden；另建议补充height或min-height防止容器坍缩导致动画不可见。
✅ 完整可运行示例
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Cool Text Animation</title>
<style>
@keyframes coolAnimation {
0%, 25% {
opacity: 0;
transform: translateY(100%);
}
12.5% {
opacity: 1;
transform: translateY(0);
}
}
#textContainer {
position: relative;
overflow: hidden;
height: 120px;
margin: 2rem auto;
max-width: 600px;
}
.coolText {
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
margin: 0;
padding: 0;
font-size: 40px;
line-height: 1.2;
color: #000;
font-family: 'Myriad Pro', Arial, sans-serif;
animation: coolAnimation 12s ease-in-out infinite;
}
.coolText:nth-child(1) { animation-delay: 0s; }
.coolText:nth-child(2) { animation-delay: 3s; }
.coolText:nth-child(3) { animation-delay: 6s; }
.coolText:nth-child(4) { animation-delay: 9s; }
</style>
</head>
<body>
<div id="textContainer">
<h3 class="coolText">UTILISATION<br>ILLIMITÉE</h3>
<h3 class="coolText">SANS<br>CONTACT</h3>
<h3 class="coolText">SANS<br>ABONNEMENT</h3>
<h3 class="coolText">ECO-<br>RESPONSABLE</h3>
</div>
</body>
</html>✅ 进阶提示
- 若需适配移动端，可配合
@media调整font-size与height； - 如需更平滑入场，可将
ease-in-out替换为cubic-bezier(0.34, 1.56, 0.64, 1)增强弹跳感； - 所有文本使用
<br>换行时，请确保line-height合理，避免上下间距异常。
该方案零 JavaScript、纯 CSS 驱动，语义清晰、性能高效，适用于产品标语轮播、功能亮点展示等轻量交互场景。
