动画 · 注意力引导 · 19
打字机
打字机 = 文字逐字显现、末尾光标闪烁,模仿实时输入以把视线引向某句话。
直达修改 Prompt →
尊重 prefers-reduced-motion:动画关闭,仅保留终态。
打字机是什么?
打字机让一句话逐字出现、末尾光标一直闪——读起来像「正在被写下」,把视线引向大标题或价值主张。用分段 clip(不是 width,那会重排)揭示,循环或停留皆可。只用于一句主标题,千万别用于段落。
动画 标本
- 触发
- load
- 技术
- css
- 时长
- 3.4s
- 缓动
steps(12, end) - 性能
- clip-path, opacity
什么时候用
- A single hero headline or value prop
- Terminal / coding brand voices
什么时候别用
- Long copy — typing more than one line feels slow
- As the only way to read critical info
Reveal with clip-path, not width — width animation reflows the whole line and stutters.
Reveal a phrase with a typewriter: stepped clip-path left-to-right plus a blinking caret, no width animation.