CSS文本段落动画逐段播放变慢及steps属性疑问求助

我来帮你理清这两个核心问题——steps(60, end)的工作原理，还有段落依次播放动画的正确实现方式：

一、先搞懂steps(60, end)到底是什么 #

你之前误以为steps(60)是控制速度，其实不是！steps()是把动画的过渡过程拆分成固定数量的“离散帧”，和速度没有直接关联：

• 第一个参数60：表示把整个动画时长分成60个独立步骤，每一步直接跳到下一个状态，没有平滑过渡。比如1秒的动画，每步间隔就是1/60 ≈ 0.0167秒，步数越多，动画看起来越接近平滑（但本质还是逐帧跳转）。
• 第二个参数end：表示动画的最后一步在动画结束时刻触发，简单说就是动画结束时刚好完成最后一步，不会有额外的停顿。对应的还有start，是第一步在动画开始时就触发。

真正控制动画速度的是animation-duration（时长），时长越短，每步的间隔就越小，动画看起来越快——这也是你设置60步时，缩短时长会变快的原因。

二、你的代码为什么会出问题？ #

1. 第一种情况：顺序播放但后面段落变慢 #

你给p3/p4/p5设置了4s/8s/16s的时长，再加上text-2关键帧里的50% { width: 0; }——这意味着前50%的时间（比如p3是2秒）宽度一直是0，后50%的时间（2秒）才从0变到目标宽度。而且时长越来越长，后面的段落自然动画速度越来越慢。

2. 第二种情况：速度对但无法顺序播放 #

你给所有段落统一了2s时长，但没设置animation-delay，所以所有动画会同时开始，自然没法依次播放。

三、正确的实现方案 #

核心思路：

• 用同一个关键帧控制所有段落的宽度动画，不需要分text-1/text-2。
• 给每个段落设置相同的动画时长（比如1s，符合你要的每段1秒动画）。
• 用animation-delay控制播放顺序，每个段落的delay比前一个多1秒（刚好等前一段动画结束再开始）。
• 保留steps(60, end)保证动画的逐帧效果（如果不需要逐帧，直接用默认的ease平滑过渡也行）。

修正后的代码 #

CSS

/* 把重复样式抽出来，减少冗余 */
.text-animate {
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid green;
  animation: text-reveal 1s steps(60, end) forwards;
  /* forwards: 动画结束后保持最后一帧状态，避免宽度变回0 */
}

.p1 { width: 80px; animation-delay: 0s; }
.p2 { width: 100px; animation-delay: 1s; }
.p3 { width: 110px; animation-delay: 2s; }
.p4 { width: 80px; animation-delay: 3s; }
.p5 { width: 82px; animation-delay: 4s; }

/* 统一关键帧：从width 0过渡到元素自身的width */
@keyframes text-reveal {
  from { width: 0; }
  to { width: var(--target-width); }
}

HTML

<div class="wrapper">
  <div class="first-row">
    <p class="text-animate p1">Paragraph 1</p>
    <div class="text-animate p2">
      <img src="#">
      <span>Paragraph 2</span>
    </div>
  </div>
  <div class="second-row">
    <p class="text-animate p3">Paragraph 3 <span> text</span></p>
    <p class="text-animate p4">Paragraph 4</p>
  </div>
  <div class="third-row">
    <p class="text-animate p5">Paragraph 5 <span>text</span></p>
  </div>
</div>

额外优化（可选） #

如果不想手动写每个元素的width，也可以用CSS变量动态设置目标宽度，更灵活：

.text-animate {
  /* ...其他样式不变 */
  --target-width: 100%; /* 默认值 */
  animation: text-reveal 1s steps(60, end) forwards;
}

.p1 { --target-width: 80px; animation-delay: 0s; }
.p2 { --target-width: 100px; animation-delay: 1s; }
/* 其他段落同理 */

这样修改后，每个段落会依次按1秒的速度播放动画，完全符合你的需求～

内容的提问来源于stack exchange，提问作者Uss