本文介绍如何通过 CSS 自定义属性（CSS variables）配合 @keyframes 动画，精准控制容器中每个子元素的进入延迟时间，解决 transition-delay 在嵌套结构中失效的问题。
本文介绍如何通过 css 自定义属性（css variables）配合 `@keyframes` 动画，精准控制容器中每个子元素的进入延迟时间，解决 `transition-delay` 在嵌套结构中失效的问题。
在网页动效开发中，常需让一组文字或图标按顺序依次滑入（如“打字机”或“逐字浮现”效果）。但直接对 .anim_word 使用 transition-delay 并配合 margin-top 变化时，往往因 CSS 选择器权重、继承逻辑或初始状态未触发重排（reflow）而失效——所有元素同步触发，失去预期的 staggered（交错）效果。
根本原因在于：原方案依赖 transition + margin-top 变化，但 .anim_word 初始 margin-top: 100% 是一个固定值，且所有元素共享相同初始状态；当父级 .anim_line.show 类统一添加后，浏览器批量计算样式变更，导致 transition-delay 无法按预设顺序生效（尤其在 inline-block 布局下，DOM 渲染与动画触发时机耦合紧密）。
✅ 推荐解决方案：改用 animation + CSS 自定义属性动态计算延迟，更可控、语义清晰且兼容性良好（现代浏览器均支持 --var 和 calc() 在 animation-delay 中使用）。
核心实现步骤
-
移除冗余 transition 声明，统一使用
@keyframes定义动画； -
为每个
.anim_word添加--idx自定义属性，标识其全局序号（从 0 开始）； - *通过 `calc(0.25s var(--idx))` 动态生成延迟值**，实现线性递增延迟；
-
使用
transform: translateY()替代margin-top—— 性能更优（不触发重排），且opacity配合可增强视觉层次。
以下是精简、可复用的完整代码：
.anim_word {
display: inline-block;
opacity: 0;
animation: fadeInUp 1.15s cubic-bezier(0.62, 0.05, 0.01, 0.99) forwards;
animation-delay: calc(0.25s * var(--idx));
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(70px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
HTML 中为每个词显式设置索引（注意：需保证全局唯一递增）：
<div class="anim_line"> <div class="anim_word" style="--idx: 0;">A</div> <div class="anim_word" style="--idx: 1;">product</div> <div class="anim_word" style="--idx: 2;">designer</div> <div class="anim_word" style="--idx: 3;">helping</div> </div> <div class="anim_line"> <div class="anim_word" style="--idx: 4;">design</div> <div class="anim_word" style="--idx: 5;">beautiful,</div> <div class="anim_word" style="--idx: 6;"> user</div> <div class="anim_word" style="--idx: 7;">centered</div> </div> <div class="anim_line"> <div class="anim_word" style="--idx: 8;">products</div> </div>
注意事项与优化建议
-
索引连续性至关重要：
--idx必须从0开始、严格递增，否则动画节奏错乱； - 避免 JavaScript 控制延迟：虽然可用 JS 动态添加 class 或 style，但纯 CSS 方案更稳定、性能更高；
-
字体与行高适配：当前
font-size: 64px+line-height: 96px已适配单行高度（96px），若调整字号，请同步更新translateY(70px)值（建议设为1.2 × font-size）； -
无障碍友好：动画完成后保持
opacity: 1和静态位置，不影响屏幕阅读器解析； -
降级兼容：旧版浏览器不支持
--idx时，可添加animation-delay: 0s作为 fallback，确保至少显示内容。
此方案不仅解决了 transition-delay 失效问题，还提升了代码可维护性与动画精度，是现代 CSS 动效开发中的推荐实践。
