本教程旨在解决css打字机效果中光标持续闪烁的问题。通过调整css动画的animation-delay和animation-iteration-count属性，可以实现在文本内容完全显示后，让打字光标停止闪烁并最终消失，从而提供一个更自然、完整的动画体验。
在网页开发中，CSS打字机效果是一种常见的文本动画，它能模拟文字逐个字符出现的动态过程，并通常伴随一个闪烁的光标。然而，一个常见的需求是，在文本内容完全显示后，希望这个光标能够停止闪烁，甚至消失，以表示打字过程的结束。如果处理不当，光标可能会无限期地闪烁下去，影响用户体验。
问题分析：无限闪烁的光标
我们来看一个典型的CSS打字机效果代码片段：
print("Hello, World!")
.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%; /* 假设文本宽度为35% */
}
}
@keyframes blink-caret {
from,
to {
border-color: transparent; /* 光标透明 */
}
50% {
border-color: rgb(255, 255, 255); /* 光标显示 */
}
}在这段代码中，typing动画负责文本的逐字显示，而blink-caret动画则控制光标的闪烁。问题的核心在于blink-caret动画的animation属性中使用了infinite关键字：
animation: blink-caret 0.75s step-end infinite;
立即学习“前端免费学习笔记（深入）”；
infinite意味着blink-caret动画将无限次重复，导致光标永不停止闪烁。为了在打字结束后停止光标闪烁，我们需要修改blink-caret动画的迭代次数和开始时间。
解决方案：精确控制光标动画
要解决光标无限闪烁的问题，我们需要对blink-caret动画的animation属性进行以下调整：
- 设置动画延迟（animation-delay）：让blink-caret动画在typing动画完成后才开始。
- 设置迭代次数（animation-iteration-count）：将infinite替换为一个有限的数字，例如1或3，以控制光标闪烁的次数。
- 设置动画填充模式（animation-fill-mode）：使用forwards确保动画在结束后保持其最终状态。
假设typing动画的持续时间是3.5s。如果我们希望光标在文本打完后，再闪烁一次然后消失，可以这样修改：
.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 1 3.5s forwards; /* 关键修改 */
}代码解析：
- typing 3.5s steps(50, end) forwards：typing动画持续3.5秒，steps(50, end)使其像打字一样逐字出现，forwards确保动画结束后元素保持最终状态（即width: 35%）。
- blink-caret 0.75s step-end 1 3.5s forwards：
- blink-caret：动画名称。
- 0.75s：每次闪烁的持续时间。
- step-end：时间函数，确保在动画周期结束时切换状态，模拟即时开关。
- 1：迭代次数。这里设置为1，表示光标在typing动画结束后，只会闪烁一个周期。
- 3.5s：动画延迟。这使得blink-caret动画在typing动画完成（3.5秒后）才开始执行。
- forwards：动画结束后，元素将保持blink-caret动画的最终状态。根据@keyframes blink-caret的定义，to状态是border-color: transparent，因此光标最终会变为透明并消失。
示例代码
将上述修改整合到完整代码中：
CSS打字机效果演示 print("Hello, World!")
注意事项：
- width属性的计算：@keyframes typing中的to { width: ...; }需要精确匹配文本内容的实际渲染宽度。如果设置过小，文本可能无法完全显示；如果设置过大，可能会出现额外的空白。一个更精确的方法是使用JavaScript动态计算文本宽度，或者通过反复调试CSS的em或ch单位来估算。在示例中，我将steps值从50调整为22（字符串字符数），并将to的width设置为15.5em，这是一个经验值，可能需要根据字体大小和letter-spacing进行微调。
- animation-fill-mode: forwards：这个属性非常重要，它确保动画在结束后保持其最终状态。对于typing动画，这意味着文本会保持完全显示；对于blink-caret动画，这意味着光标会保持透明状态（即消失）。
-
光标停留或消失：
- 如果希望光标在打字结束后消失，如本教程所示，blink-caret的forwards会使其停留在border-color: transparent状态。
- 如果希望光标在打字结束后保持可见但不闪烁，则需要更复杂的处理。一种方法是让blink-caret在最后一次闪烁后，将其border-color设置为非透明，或者在动画结束后通过额外的CSS规则或JavaScript来覆盖border-right的颜色。但最直接的纯CSS方法是让它消失。
- steps()函数的第一个参数：steps(N, end)中的N通常应设置为文本的字符数，或者略大于字符数以确保平滑过渡。这与typing动画的width属性紧密相关。
总结
通过对CSS动画属性animation-delay、animation-iteration-count和animation-fill-mode的精确控制，我们可以优雅地解决CSS打字机效果中光标无限闪烁的问题。这种方法不仅保持了纯CSS的实现方式，还提供了灵活的定制选项，可以根据具体需求调整光标的闪烁次数和最终状态。理解这些动画属性的工作原理是创建复杂而流畅的CSS动画的关键。
