CSS 实现多文本循环逐个上浮淡入动画教程-html教程-PHP中文网

CSS 实现多文本循环逐个上浮淡入动画教程

本文详解如何仅用 html 和 css 实现多个文本项在固定位置依次执行“上浮→完全显示→下隐”动画，并无缝循环，适用于宣传标语轮播等场景。

本文详解如何仅用 html 和 css 实现多个文本项在固定位置依次执行“上浮→完全显示→下隐”动画，并无缝循环，适用于宣传标语轮播等场景。

要实现如“UTILISATION ILLIMITÉE”“SANS CONTACT”等多行文案在同一位置逐个浮现、动画风格一致、无限循环的效果，关键不在于为每个元素单独定义复杂动画，而在于统一动画时长 + 精确分段控制 + 绝对定位叠加。下面从原理到代码逐步说明。

✅ 核心设计思路

所有文本元素需绝对定位（position: absolute） 于同一容器内，确保视觉上完全重叠；
使用单个 @keyframes 动画，总周期设为 12s（4 个文本 × 每个独占 3s 可见窗口），避免动画节奏错位；
每个文本的 animation-delay 错开 3s（0s, 3s, 6s, 9s），形成接力效果；
动画关键帧严格划分：
- 0% 和 25%：完全隐藏（opacity: 0; transform: translateY(100%)）；
- 12.5%：居中完全显示（opacity: 1; transform: translateY(0)）；
  这样每个文本仅在自身 3s 窗口的中间约 0.75s 内清晰可见，其余时间彻底隐藏，实现“一个消失、下一个立即接上”的流畅切换。

? 完整可运行代码



  <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;
      height: 120px; /* 建议显式设置高度，避免布局抖动 */
      overflow: hidden;
      font-family: 'Myriad Pro', Arial, sans-serif;
    }

    .coolText {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      margin: 0;
      padding: 0;
      color: #000000;
      font-size: 40px;
      line-height: 1.2;
      text-align: center;
      animation: coolAnimation 12s ease-in-out infinite;
      opacity: 0;
      transform: translateY(100%);
    }

    .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><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">ÉCO-<br>RESPONSABLE</h3>
  </div>

⚠️ 注意事项与优化建议

字体换行处理：使用 <br> 是快速方案，但更健壮的做法是用 white-space: pre-line 或 CSS Grid/Flex 配合 word-break 控制断行；
响应式适配：若需适配移动端，建议用 rem 或 clamp() 替代固定 40px 字号，并添加媒体查询调整容器高度；
性能提示：transform 和 opacity 属于 GPU 加速属性，本方案天然高效；避免对 top/left 或 height 等触发重排的属性做动画；
文字修正：原始代码中 “UTULISATION” 应为 “UTILISATION”，已同步修正；法语连字符和重音符号（如 ÉCO-, ILLIMITÉE）请确保 UTF-8 编码无误；
调试技巧：临时添加 #textContainer { border: 1px solid #ccc; } 可直观查看容器范围，避免因 overflow: hidden 导致内容被意外裁剪。