Hero区域文字动画可用纯CSS+语义化HTML实现，关键在分层控制节奏、避免抖动：逐字打字用width+steps()与nowrap+overflow:hidden；禁用marquee因可访问性、渲染及SEO缺陷；文字与背景动画须分离配置并加will-change；滚动触发需IntersectionObserver配合CSS类切换；多动画时序对齐依赖DevTools精确调试。
直接说结论：Hero 区域文字动画不靠 JavaScript 框架，用纯 CSS + 语义化 HTML 就能做出专业级效果，关键在分层控制动画节奏和避免布局抖动。
怎么让 hero 文字逐字出现（打字机效果）
这不是简单加个 opacity 动画，而是要模拟真实输入节奏。核心是用 width + steps() 控制字符粒度，再配合 white-space: nowrap 防止折行破坏动画流。
- 必须设置容器
overflow: hidden，否则文字会提前溢出 -
steps(12)中的数字得等于文本字符数（含空格），不然最后一两个字会“跳”出来 - 光标闪烁建议用单独伪元素
::after实现，避免干扰主文字动画时序 - 移动端要注意
font-size缩放后字符宽度变化，steps()值可能需要 media query 重设
为什么 marquee 标签不能用在 hero 区域
它已被 W3C 明确标记为 obsolete，Chrome/Firefox 等现代浏览器虽仍渲染，但存在三个硬伤：
- 无法用 CSS 精确控制起始位置、缓动曲线或暂停逻辑
- 屏幕阅读器会把滚动内容重复朗读多次，严重损害可访问性
- 与
transform: scale()或will-change共存时，GPU 渲染层容易冲突导致闪屏 - SEO 友好度差，搜索引擎可能忽略滚动中快速闪过的文字
如何实现“文字淡入 + 背景渐变同步推进”
hero 区域常需文字和背景图/色同步入场，但别给两者套同一个 animation 名称——它们的持续时间、延迟和缓动函数通常不同。
立即学习“前端免费学习笔记（深入）”；
- 文字用
animation: fadeIn 1.2s cubic-bezier(0.34, 1.56, 0.64, 1)（带轻微过冲，更显活力） - 背景渐变用
background-image: linear-gradient(...)配合animation: bgShift 4s ease-in forwards，关键帧里只改background-position或渐变色标位置 - 务必加
will-change: opacity, background-position提前告知浏览器哪些属性会变，防卡顿 - 如果用
background-clip: text做渐变文字，得额外加-webkit-background-clip: text和color: transparent
滚动到 hero 区域才触发动画（scroll-triggered）
纯 CSS 无法监听滚动，这里必须引入轻量 JS，但不用全量加载 ScrollTrigger 库。
- 用
IntersectionObserver监听 hero 元素进入视口，触发classList.add('animate-in') - CSS 里写
.hero-text.animate-in { animation: slideUp 0.8s ease-out forwards; }，初始状态设为transform: translateY(40px); opacity: 0 - 注意添加
rootMargin: '0px 0px -20% 0px'，让动画在元素还有 20% 高度可见时就启动，避免用户已看到一半才开始动 - 别忘了在
unobserve后清除 observer 实例，防止内存泄漏
真正难的不是写出第一个动画，而是让 5 个不同节奏的动画（文字逐字、光标、背景移入、按钮浮现、箭头脉冲）在各种屏幕尺寸下始终对齐时序——这需要反复用 Chrome DevTools 的 Animations 面板调帧率和延迟，而不是靠“大概差不多”。
