CSS 如何实现文字逐字显示动画？

Question

CSS 如何实现文字逐字显示动画？

仓乃文 · Accepted Answer

文字逐字显示通过 animation-delay 给每个字符设置递增延迟，配合 SASS 循环生成，实现打字机般的逐字出现效果。

```scss
@mixin letter-animation($count, $delay: 0.05s) {
  @for $i from 1 through $count {
    span:nth-child(#{$i}) {
      animation-delay: #{$i * 0.05}s;
    }
  }
}

.letter-text span {
  display: inline-block;
  opacity: 0;
  animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeIn {
  to { opacity: 1; }
}
```

纯 CSS 方案（无需拆分 span）：
```css
.typewriter-text {
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid #333;
  width: 0;
  animation:
    typing 3s steps(20) forwards,
    blink 0.5s step-end infinite alternate;
}

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink {
  50% { border-color: transparent; }
}
```

补充说明：
- 方案一需要 JS 或模板引擎将每个字符包裹在 span 中
- 方案二使用 steps() 步进函数 + width 动画，无需拆分字符
- steps(20) 中的数字等于字符数
- blink 动画模拟光标闪烁