用steps()函数配合CSS动画可实现打字机效果，核心是steps(N,end)将动画分为N步逐字显示，推荐clip-path法支持中英文混排，需字符数与steps值严格一致。
用
函数配合 CSS 动画，可以轻松实现逼真的打字机效果——文字逐字出现，像在被敲出来一样。
核心原理：用 steps() 控制动画帧数
表示把整个动画过程均匀分成 10 步，每步只显示一个“状态”，不平滑过渡。关键在于：把文字长度作为步数，并让
或
从 0 逐步展开到 100%，每步对应一个字符的宽度。
方法一：用 width +
overflow
配合 monospace 字体
适合纯英文或等宽字体场景，简单稳定：
给文字容器设
，确保每个字符宽度一致
设置
，初始隐藏全部文字
动画中
从
（0 个字符宽）渐变到
（N 为总字符数）
动画时长搭配
，例如 12 个字就写
方法二：用 clip-path 更通用（推荐）
支持中英文混排、任意字体，兼容性好（现代
浏览器
均支持）：
立即学习
“
前端免费学习笔记（深入）
”；
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
用
初始遮住全部文字
动画中将右侧偏移从
线性减到
，即
用
分 N 步完成，每步露出一个字符
需配合
防止换行打断效果
完整示例代码（clip-path 版）
HTML：
CSS：
注意：steps 数值（这里是 10）要和实际字符数严格一致；中文字符、标点、空格都算 1 步。
steps()steps(10, end)widthclip-pathfont-family: monospacewidth: 0; overflow: hidden;width0chNchsteps(N, end)steps(12, end)clip-path: inset(0 100% 0 0)100%0%inset(0 X% 0 0)steps(N, end)white-space: nowrapHello，你好！.typewriter {
font-family: "Helvetica Neue", sans-serif;
white-space: nowrap;
overflow: hidden;
animation: typing 3s steps(10, end), blink-caret 0.75s step-end infinite;
}
@keyframes typing {
from { clip-path: inset(0 100% 0 0); }
to { clip-path: inset(0 0 0 0); }
}
@keyframes blink-caret {
from, to { border-right-color: transparent; }
50% { border-right-color: currentColor; }
}