CSS实现打字机动画效果，核心在于巧妙利用
steps()函数来控制文本宽度以离散的步进方式增长，同时结合
overflow: hidden和
white-space: nowrap来隐藏超出部分，并模拟光标闪烁。这套组合拳下来，你就能用纯CSS搞定一个相当逼真的打字效果了。
解决方案
要实现一个基础的打字机动画，你需要一个包含文本的元素，比如一个
或者
标签。CSS的关键在于控制这个元素的宽度，让它像字符一个一个被敲出来那样逐渐展开。
首先，HTML结构可以很简单：
CSS怎样实现打字机动画效果？steps()函数详解
立即学习“前端免费学习笔记（深入）”；
然后是CSS部分，这才是重头戏：
.typewriter p {
font-family: 'Mono', monospace; /* 选用等宽字体，效果更佳 */
overflow: hidden; /* 隐藏超出容器的内容 */
white-space: nowrap; /* 文本不换行 */
border-right: .15em solid orange; /* 模拟光标 */
width: 0; /* 初始宽度为0 */
animation:
typing 4s steps(30, end) forwards, /* 打字动画，30是字符数 */
blink-caret .75s step-end infinite; /* 光标闪烁动画 */
}
/* 打字动画 */
@keyframes typing {
from { width: 0 }
to { width: 100% } /* 宽度从0到100% */
}
/* 光标闪烁动画 */
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: orange; }
}这里面有几个关键点：
overflow: hidden;
和white-space: nowrap;
是为了确保文本在宽度增长时，不会溢出容器或换行，而是被“裁剪”掉。width: 0;
是动画的起点，文本一开始是完全隐藏的。border-right: .15em solid orange;
模拟了打字时光标的视觉效果。animation: typing 4s steps(30, end) forwards, blink-caret .75s step-end infinite;
是核心。typing 4s steps(30, end) forwards
: 定义了打字动画。4s
是动画持续时间。steps(30, end)
是魔法所在，它告诉浏览器将整个动画过程分成30个等长的“步”，每一步结束时更新一次宽度。这里的30
通常对应文本的字符数量，这样每一步就刚好显示一个字符。end
表示每一步的结束点发生变化。forwards
让动画结束后停留在最后一帧，即文本完全显示。blink-caret .75s step-end infinite
: 定义了光标闪烁动画。step-end
在这里也很关键，它让光标的显示和隐藏是瞬间切换，而不是平滑过渡。
通过这种方式，
width属性不再是平滑增长，而是跳跃式地一步一步增加，完美模拟了打字机字符逐个出现的离散感。
打字机动画中光标闪烁效果的实现原理是什么？
打字机动画里的那个光标，通常就是一条垂直的细线，一闪一闪的，特别有感觉。它的实现原理其实挺简单，但又很巧妙。我们通常会利用元素的
border-right属性来模拟这个光标，然后通过一个独立的CSS动画来控制它的颜色透明度，从而达到闪烁的效果。
具体来说，就是给文本容器（或者文本本身，如果它宽度会随内容变化）一个右边框，比如
border-right: .15em solid orange;。这个边框就成了我们的“光标”。
接着，我们创建一个名为
blink-caret的
@keyframes动画：
@keyframes blink-caret {
from, to { border-color: transparent } /* 动画开始和结束时，边框颜色透明 */
50% { border-color: orange; } /* 动画进行到一半时，边框颜色变为可见 */
}然后将这个动画应用到我们的元素上：
animation: blink-caret .75s step-end infinite;。
这里的
step-end计时函数是关键，它确保了边框颜色的变化是瞬间完成的，没有渐变过程。
from, to { border-color: transparent }让光标在动画周期的开始和结束时隐藏（透明），而50% { border-color: orange; }则让它在中间显现。infinite则保证了光标会一直闪烁下去。
我个人觉得，这个光标闪烁效果，虽然看起来只是个小细节，但它对于增强打字机动画的真实感至关重要。没有它，动画总觉得少了点“活气儿”。
除了打字机效果，steps()函数在CSS动画中还有哪些巧妙应用？
steps()函数在CSS动画里远不止打字机效果这么简单，它其实是一个非常强大的计时函数，能把任何平滑的动画分解成一系列离散的步骤。我一直觉得它就像一个“帧控制器”，能让你在纯CSS里实现很多原本需要JavaScript才能搞定的逐帧动画。
一个非常经典的用法就是精灵图（Sprite）动画。如果你有一张包含多个动画帧的图片，比如一个走路的小人，你可以用
steps()来控制
background-position，让背景图在预设的步数内精确地跳到下一帧，从而实现逐帧播放的动画效果。
比如，一个有8帧的走路动画精灵图，每帧宽度100px：
.sprite-animation {
width: 100px;
height: 100px;
background-image: url('walk-sprite.png');
background-position: 0 0; /* 初始位置 */
animation: walk 1s steps(8) infinite; /* 8帧，每秒一循环 */
}
@keyframes walk {
to { background-position: -800px 0; } /* 8帧 * 100px = 800px */
}这样，
background-position就会在1秒内，分8次跳跃，每次跳跃100px，完美地播放了精灵动画。
另外，
steps()还可以用于创建自定义的“缓入缓出”效果，但不是平滑的，而是阶梯式的。比如，一个元素在移动时，你可以让它每隔一段距离“跳”一下，而不是匀速滑动。这在制作一些像素风格的游戏UI或者特殊视觉效果时非常有用。
甚至，有时候我会用
steps()来模拟一些加载指示器，比如一个点点点逐个出现的动画，或者一个进度条以固定块状增长，而不是平滑填充。它提供了一种控制动画粒度的能力，让动画不再是连续的，而是可控的、离散的，这在很多场景下都能带来意想不到的视觉趣味。
结合JavaScript，如何实现更高级的打字机动画交互逻辑？
虽然纯CSS的打字机效果已经很棒了，但一旦涉及到更复杂的逻辑，比如多段文本的依次出现、中途暂停、删除重打，或者根据用户操作来触发动画，JavaScript的介入就变得不可避免，而且会让你事半功倍。
最常见的需求是多行文本的顺序打字。纯CSS很难做到一段打完再打下一段，但用JavaScript就能轻松实现。你可以把所有文本内容放在一个数组里，然后用
setTimeout或者
Promise链来控制每一段文本的打字动画。
基本思路是：
- 定义一个函数，接收文本内容作为参数，内部动态创建一个
或
元素，设置好CSS类。
- 将文本内容赋值给这个元素，并计算出字符数，用于
steps()
函数。 - 通过JavaScript动态添加这个元素到DOM中，并设置动画。
- 监听
animationend
事件，当当前段落的打字动画结束后，再调用函数处理下一段文本。
// 伪代码示例
const texts = [
"这是第一段文字，会先打出来。",
"然后是第二段，稍微长一点，模拟思考。",
"最后是第三段，结束语。"
];
let textIndex = 0;
function typeText(text) {
const container = document.querySelector('.typewriter');
const p = document.createElement('p');
p.textContent = text;
container.appendChild(p);
// 计算字符数
const charCount = text.length;
// 动态设置CSS变量，或者直接设置style属性
p.style.setProperty('--char-count', charCount);
p.style.animation = `typing ${charCount * 0.1}s steps(var(--char-count), end) forwards, blink-caret .75s step-end infinite`;
p.addEventListener('animationend', () => {
// 动画结束后，移除光标闪烁动画（可选）
p.style.animation = `typing ${charCount * 0.1}s steps(var(--char-count), end) forwards`;
// 或者直接隐藏光标：p.style.borderRight = 'none';
textIndex++;
if (textIndex < texts.length) {
setTimeout(() => typeText(texts[textIndex]), 1000); // 1秒后开始下一段
}
}, { once: true }); // 确保事件只触发一次
}
// 初始调用
typeText(texts[textIndex]);除了顺序播放，JavaScript还能实现：
-
暂停与恢复：通过切换CSS类或者直接修改
animation-play-state
属性。 -
删除效果：反向动画，将
width
从100%变为0%，或者改变overflow
和white-space
。 - 用户交互触发：点击按钮开始打字，或者滚动到特定区域时激活动画。
- 动态内容：从API获取数据后，再进行打字动画展示。
这些高级交互，都是纯CSS难以企及的，JavaScript提供了灵活的控制能力，让你的打字机动画不仅仅是静态展示，而是能与用户、与数据进行深度互动。
