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

本教程详细讲解如何优化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关键字。

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

解决视觉对齐与“动画未完成”的错觉

有时，尽管typing动画已经完成并停留在最终宽度，但文本的视觉呈现可能仍会让人感觉“未完成”或“不对称”。这通常与文本的对齐方式有关。当一个元素的宽度被动画控制时，其内部文本的默认左对齐可能会导致以下情况：

立即学习“前端免费学习笔记（深入）”；

Shepherd Study

一站式AI学习助手平台，提供AI驱动的学习工具和辅导服务

73

查看详情

1. 文本未完全显示: 如果设置的最终宽度（例如width: 35%）不足以完全容纳所有文本，部分文本将因overflow: hidden而被裁剪。
2. 视觉不平衡: 即使文本完全显示，如果其父容器是居中的，而文本本身是左对齐的，可能会在视觉上显得偏左，给人一种动画没有“收尾”的感觉。

解决这个问题的关键是利用text-align属性来控制文本在元素内部的水平对齐方式。通过添加text-align: center;，文本内容将会在其当前宽度内居中显示。这不仅可以确保文本在有限宽度内更好地分布，还能在视觉上使打字机效果的最终状态看起来更加平衡和完整，从而消除“动画未完成”的错觉。

优化后的CSS代码示例

在原始代码的基础上，为h5元素添加text-align: center;即可解决视觉对齐问题。

.col-twelve h5 {
  overflow: hidden; /* 确保内容在动画完成前不显示 */
  border-right: 0.15em solid orange; /* 打字机光标 */
  white-space: nowrap; /* 保持内容在单行 */
  margin: 0 auto; /* 实现打字时的居中效果 */
  letter-spacing: 0.15em; /* 调整字间距 */
  text-align: center; /* 新增：确保文本在动画完成后居中对齐 */
  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);
  }
}

注意事项与进阶优化

1. width值的精确性: 动画的最终width值（例如35%）需要根据实际文本内容的长度进行调整。如果width过小，文本会被裁剪；如果过大，可能会出现空白区域。更理想的做法是，如果可能，计算出文本的实际宽度，或者使用fit-content（但fit-content不能直接用于动画的to值）。对于固定文本，可以尝试使用ch单位（字符宽度）来精确控制宽度，例如width: 15ch;。
2. 光标的停止: 如果需要光标在打字完成后也停止闪烁，可以在typing动画结束后，通过JavaScript动态移除blink-caret动画类，或者在CSS中定义一个有延迟的光标停止动画。例如，为blink-caret动画设置一个有限的animation-iteration-count，使其在打字完成后再闪烁几次然后停止。
3. 响应式设计: 当使用百分比宽度时，在不同屏幕尺寸下文本的实际显示宽度会变化。这可能导致文本在某些情况下被裁剪或出现过多空白。考虑使用媒体查询来调整width值，或使用更灵活的单位如ch。
4. steps()函数: steps(50, end)中的50表示动画将在50个等步长中完成。这个值通常与文本的字符数相关，以模拟逐字打出的效果。end表示动画在每个步长的末尾发生变化。

总结

实现一个完美的CSS打字机效果，不仅要确保动画的正确执行，还要关注其视觉上的完成度和对齐。通过利用animation-fill-mode: forwards确保动画停留在最终状态，并结合text-align: center;解决文本的视觉对齐问题，可以极大地提升用户体验，避免“动画未完成”的错觉。同时，根据实际需求调整宽度、光标行为和响应式考量，将使你的打字机效果更加专业和流畅。

以上就是CSS打字机效果：确保动画正确完成与视觉对齐的详细内容，更多请关注php中文网其它相关文章！