网站多行Typewriter动画问题：动画启动前文本提前显示

你的问题根源是初始样式设置不完整，导致第二行文本在动画开始前就已显示，后续又因动画重置宽度出现“消失再重新打字”的异常。以下是具体修复方案：

修正后的CSS代码 #

/* 将此代码复制粘贴到你的CSS编辑器中 */
.typewriter p {
  white-space: nowrap;
  overflow: hidden;
  width: 0; /* 初始宽度设为0，让文本完全隐藏 */
  margin: 0.5em 0; /* 可选：增加行间距，优化视觉效果 */
}

.typewriter p:nth-child(1) {
  /* 根据文本长度调整目标宽度，避免截断 */
  animation: type 2s steps(40, end);
  animation-delay: 1s;
  animation-fill-mode: forwards; /* 动画结束后保持最终状态 */
}

.typewriter p:nth-child(2) {
  opacity: 0; /* 初始透明，配合动画延迟 */
  animation: type2 2s steps(40, end);
  animation-delay: 3s;
  animation-fill-mode: forwards;
}

/* 第一行打字动画：从宽度0过渡到目标宽度 */
@keyframes type {
  0% {
    width: 0;
  }
  100% {
    width: 16em; /* 设置第一行文本的目标宽度 */
  }
}

@-webkit-keyframes type {
  0% {
    width: 0;
  }
  100% {
    width: 16em;
  }
}

/* 第二行打字动画：先显示，再逐步展开宽度 */
@keyframes type2 {
  0% {
    width: 0;
    opacity: 0;
  }
  1% {
    opacity: 1; /* 动画开始瞬间显示文本 */
  }
  100% {
    opacity: 1;
    width: 22em; /* 设置第二行文本的目标宽度 */
  }
}

@-webkit-keyframes type2 {
  0% {
    width: 0;
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    width: 22em;
  }
}

对应的HTML代码 #

<div class="typewriter">
  <p>Words have power.</p>
  <p>We leverage that power for good.</p>
</div>

关键修改说明 #

• 初始宽度设为0：所有.typewriter p默认宽度为0，结合overflow:hidden，文本会被完全隐藏，不会提前出现在页面上。
• 统一动画逻辑：第一行动画只负责宽度从0到目标值的过渡；第二行动画先在开始瞬间将opacity设为1，再逐步展开宽度，避免“消失再出现”的异常。
• 修正webkit动画错误：原来的@-webkit-keyframes type2结尾opacity设为0，导致动画结束后第二行消失，现在改为1，保持文本显示。
• 调整目标宽度：第二行文本更长，把目标宽度改为22em，避免文本被截断（可根据实际内容调整）。

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