用 animation + ch 单位实现打字效果需设 inline-block、overflow: hidden、white-space: nowrap，width 从 0 到 Nch 动画，时长按 0.1s/字动态计算；光标用 border-right 配合 blink-caret 动画；iOS Safari 跳帧可拆分元素或改用 JS 实现。
用
+
单位实现基础打字效果
核心是让文字逐字“显现”，本质是控制
从
到目标宽度，并配合
截断。用
单位比
或
更可靠——它代表当前字体中 “0” 字符的宽度，对等宽/非等宽字体都具备可预测性。
关键点：
必须设置，否则换行会破坏宽度计算
动画时长建议按字符数动态算：比如 24 字符 →
（即
每字），太慢显得迟滞，太快看不清
必须设
或
，否则
对
元素无效
解决中文/全角字符下
计算不准的问题
在多数中文字体里≈汉字宽度，但不绝对。比如某些思源黑体变体中，“一”比“0”窄，导致
实际撑不满 32 个汉字，末尾被截断。这不是 bug，是字体度量差异。
稳妥做法：
立即学习
“
前端免费学习笔记（深入）
”；
用
字体栈兜底（如
），中英文都更接近等宽预期
改用
+
组合：先让容器自然撑开，再用
动画覆盖，避免硬写
值
对已知固定文案，直接用 JS 读取
后设为动画终点值（适合 SSR 后 hydrate 场景）
光标闪烁必须用
而非伪元素
很多人用
画光标，结果动画卡顿或不同步。根本原因是伪元素无法参与主元素的
动画节奏，且在部分浏览器中触发重排。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
正确方式是复用
：
给文字容器设
在
中只控制
透明/不透明，或直接
开关
务必加
，否则
会影响宽度动画基准
移动端 Safari 下
动画跳帧的绕过方案
iOS 16+ 之前，Safari 对
的支持有偏差，尤其 N > 20 时容易合并步进，导致“两字一闪”。这不是 CSS 写错，是渲染管线优化过度。
实测有效的应对：
把长句拆成多个
，每段 ≤ 12 字，分别加动画（用
串连）
放弃
，改用 JS 控制
逐字插入 +
，兼容性 100%，CPU 开销可控
对纯展示场景，用
配合极短周期（
）反复触发，视觉上仍像逐字
真正麻烦的不是怎么动起来，而是不同设备上“看起来是不是一个字一个字出来的”——这取决于字体、DPR、GPU 加速状态，甚至系统辅助功能是否开启。上线前至少要在 iOS 真机、Chrome Android、Windows Edge 三端并排对比。
animationchwidth0overflow: hiddenchempxwhite-space: nowrap2.4s0.1sdisplay: inline-blockblockwidthinline.typewriter {
display: inline-block;
overflow: hidden;
white-space: nowrap;
animation: typing 3.2s steps(32, end), blink-caret 0.75s step-end infinite;
}
@keyframes typing {
from { width: 0 }
to { width: 32ch } /* 字符数要和实际文字一致 */
}chch32chmonospacefont-family: ui-monospace, 'Cascadia Code', monospacemax-widthfit-contentwidthchoffsetWidthborder-right::aftersteps()border-rightborder-right: 2px solid #000@keyframesborder-right-colorborder-right-widthbox-sizing: border-boxborder.typewriter {
border-right: 2px solid #000;
box-sizing: border-box;
}
@keyframes blink-caret {
50% { border-color: transparent; }
}steps()steps(N, end)animation-delaysteps()textContentrequestAnimationFrameanimation-timing-function: steps(1, end)0.05s