css动画衔接需手动对齐时间轴：animation-delay必须严格等于前一个animation-duration，多动画须合并为单条逗号分隔声明，配合animation-fill-mode: backwards/forwards避免闪回或终态丢失，并推荐用css变量统一管理延迟值。
多个 CSS 动画无法靠“等前一个播完再播下一个”自动衔接，必须手动对齐时间轴——animation-delay 的值要和前一个动画的 animation-duration 严格相等，否则必然出现空档或重叠。
animation-delay 必须精确匹配前一个 animation-duration
浏览器不提供动画回调，所有衔接全靠手算时间点。比如第一个动画定义为 animation: fade-in 0.3s ease-out，第二个动画想紧接其后，它的 animation-delay 就得设为 0.3s，不能是 0.28s 或 0.32s。
- 小数点后最多保留 2 位（如
0.25s），避免渲染引擎解析抖动 - 单位统一用
s，除非你真需要 10ms 级别的精度（此时才用ms） - 若动画含
animation-iteration-count: infinite，animation-delay只影响首次启动，后续循环不受影响
多个 animation 声明必须合并为单条属性
写两行 animation: fade-in 0.3s; 和 animation: slide-in 0.4s 0.3s; 是无效的——浏览器只认最后一条，前面的被丢弃。必须写成逗号分隔的多值语法：
animation: fade-in 0.3s ease-out, slide-in 0.4s ease-out 0.3s;
- 每个动画的
name、duration、timing-function、delay必须一一对应，顺序不能错 - 同名属性（如两个动画都改
transform）会冲突，导致“闪回”或终态丢失 - 若需不同填充行为，
animation-fill-mode无法按动画单独设置，只能全局设为forwards或backwards，需权衡取舍
用 CSS 变量统一管理延迟节奏
手算一串 0.3s、0.6s、0.9s 容易出错，尤其当持续时间调整时。推荐在根或父容器定义变量：
:root { --anim-step: 0.3s; }
然后子元素用 calc() 推导：
.item:nth-child(1) { animation-delay: calc(var(--anim-step) * 0); }.item:nth-child(2) { animation-delay: calc(var(--anim-step) * 1); }.item:nth-child(3) { animation-delay: calc(var(--anim-step) * 2); }
这样改一次 --anim-step 就能全局同步所有延迟，且避免浮点误差累积。
animation-fill-mode: backwards 和 forwards 不可省略
只设 animation-delay 会导致视觉异常：
- 没加
animation-fill-mode: backwards→ 延迟期内元素显示原始样式，到延迟结束瞬间跳到动画第一帧，产生“闪一下才动” - 没加
animation-fill-mode: forwards→ 动画播完立刻回退到初始状态，位移、缩放、透明度变化全失效，后续布局和交互全乱 -
backwards必须和animation-delay同时存在才生效；forwards应配合animation-iteration-count: 1使用
真正容易被忽略的是：当动画起始态和默认态一致（比如都是 opacity: 1），backwards 看不出效果，但逻辑上仍需声明——否则换主题或改默认值时，动画会突然崩。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
