CSS打字机效果：确保动画正确完成与视觉对齐

admin 百科 2025-12-09 14

本教程详细讲解如何优化css打字机效果，确保动画在完成打字后停止并正确对齐。我们将探讨`animation-fill-mode: forwards`在动画停止中的作用，以及`text-align`属性如何解决文本对齐问题，从而提升动画完成后的视觉呈现，避免“动画未完成”的错觉。文章提供具体代码示例和注意事项，帮助开发者实现流畅专业的打字机效果。

理解CSS打字机效果的核心原理

CSS打字机效果通常通过动画控制元素的宽度，配合overflow: hidden和white-space: nowrap属性来实现。当元素的宽度逐渐增加时，文本内容会像被“打出”一样逐步显示。同时，一个模拟光标的border-right属性会通过blink-caret动画周期性地闪烁。

在提供的代码片段中，typing动画负责控制文本的显示进度，它将元素的宽度从0动画到35%。blink-caret动画则控制光标的闪烁。

.col-twelve h5 {
  overflow: hidden; /* 确保内容在动画完成前不显示 */
  border-right: 0.15em solid orange; /* 打字机光标 */
  white-space: nowrap; /* 保持内容在单行 */
  margin: 0 auto; /* 实现打字时的居中效果 */
  letter-spacing: 0.15em; /* 调整字间距 */
  animation: typing 3.5s steps(50, end) forwards,
    blink-caret 0.75s step-end infinite;
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 35%; /* 动画结束时的宽度 */
  }
}

@keyframes blink-caret {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: rgb(255, 255, 255);
  }
}

登录后复制

确保打字动画的正确完成

要确保typing动画在完成打字后停止在最终状态，关键在于animation属性中的forwards关键字。

CSS打字机效果：确保动画正确完成与视觉对齐-第2张图片-佛山资讯网

animation-fill-mode: forwards (或简写中的forwards): 这个属性值指示动画在播放完毕后，将元素保持在动画的最后一个关键帧所定义的样式。这意味着一旦typing动画达到width: 35%的状态，它就会固定在这个宽度，而不会跳回初始状态。
光标动画的持续性: 请注意，blink-caret动画被设置为infinite，这意味着光标会无限期地闪烁。如果希望光标在打字完成后也停止闪烁，需要调整blink-caret动画的animation-iteration-count属性，或者在typing动画结束后，通过JavaScript移除或修改blink-caret动画。