交错淡入

Each letter fades in one after another using opacity animation with staggered animation-delay, creating a smooth cascading reveal.

实时预览

Fade Stagger

代码

css

.fade-stagger {
  display: inline-flex;
  font-size: 36px;
  font-weight: 800;
}

.fade-stagger span {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  animation: fade-in-up 0.5s ease forwards;
  color: #a78bfa;
}

/* Stagger delay per letter */
.fade-stagger span:nth-child(1)  { animation-delay: 0s; }
.fade-stagger span:nth-child(2)  { animation-delay: 0.08s; }
.fade-stagger span:nth-child(3)  { animation-delay: 0.16s; }
.fade-stagger span:nth-child(4)  { animation-delay: 0.24s; }
.fade-stagger span:nth-child(5)  { animation-delay: 0.32s; }
.fade-stagger span:nth-child(6)  { animation-delay: 0.40s; }
.fade-stagger span:nth-child(7)  { animation-delay: 0.48s; }
.fade-stagger span:nth-child(8)  { animation-delay: 0.56s; }
.fade-stagger span:nth-child(9)  { animation-delay: 0.64s; }
.fade-stagger span:nth-child(10) { animation-delay: 0.72s; }
.fade-stagger span:nth-child(11) { animation-delay: 0.80s; }
.fade-stagger span:nth-child(12) { animation-delay: 0.88s; }

@keyframes fade-in-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

html

<div class="fade-stagger">
  <span>F</span><span>a</span><span>d</span><span>e</span>
  <span>S</span><span>t</span><span>a</span><span>g</span><span>g</span><span>e</span><span>r</span>
</div>

纯 CSS 实现的交错淡入文字动画效果——通过渐变、阴影、滤镜和变换等 CSS 属性让文字产生视觉动效。所有文字内容保持可选中、可复制、对搜索引擎完全可见。

快速使用

复制 CSS 代码到你的样式文件中
在 HTML 中放入对应的文字结构（注意逐字效果需要每个字符包裹 <span>）
根据你的文字内容调整 animation-delay 和文字数量
修改颜色和字号以匹配你的品牌风格

使用场景

页面主标题：用渐变文字、霓虹发光或逐字弹跳效果吸引用户注意力
品牌名称/Logo：3D 文字或故障效果传递技术与设计感
营销活动页：彩虹文字、闪烁效果营造促销紧迫感
技术博客/文档：打字机效果展示代码片段或技术标语

常见问题

Q: 文字动画在哪些浏览器下兼容？ A: 大部分效果所有现代浏览器都支持。需注意：background-clip: text 需 -webkit- 前缀；@property 仅 Chrome/Edge 支持。渐变文字和霓虹发光效果建议加降级方案。

Q: 动画文字会影响 SEO 吗？ A: 不会。文字内容仍然在 HTML 中正常渲染，搜索引擎能完整抓取。CSS 动画只影响视觉呈现，不改变 DOM 结构和文本可访问性。

Q: 如何让逐字动画适配任意长度的文字？ A: 用 JavaScript 动态给每个字符包裹 <span> 并设置 animation-delay: calc(var(--i) * 0.05s)，或使用 CSS animation-delay 配合 nth-child 错位。

浏览器兼容性

浏览器	兼容性
Chrome / Edge	✅ 完全支持（含 `@property`）
Firefox	✅ 基本支持（不含 `@property`）
Safari	✅ 基本支持（需 `-webkit-background-clip`）
移动端浏览器	✅ 完全支持
IE 11	❌ 渐变文字等高级效果不支持

使用说明

属性	说明
`opacity: 0` → `1`	Each letter fades from invisible to visible
`transform: translateY(10px)`	Adds a subtle upward slide during fade-in
`animation-delay`	Increment by `0.06s`–`0.1s` per letter for smooth cascade
`animation-fill-mode: forwards`	Keeps final visible state after animation

Tip: For longer text, use JavaScript to set style="animation-delay: ${i * 0.08}s" on each <span> instead of writing nth-child rules manually.

交错淡入 ​

实时预览 ​

代码 ​

快速使用 ​

使用场景 ​

常见问题 ​

浏览器兼容性 ​

使用说明 ​

📎 相关动画推荐