新插入的li或动态创建元素的@keyframes动画不触发，是因为浏览器需“已渲染但视觉不可见”的初始状态作为起点；仅定义@keyframes不等于触发动画，必须手动设置初始样式（如opacity:0、transform:translatey(20px)）、强制重排（getcomputedstyle）、再添加动画class，并配合animation-fill-mode:forwards及硬件加速（translatez(0)）确保稳定播放。
为什么直接加 @keyframes 动画没反应
新插入的 li 或动态创建的元素，即使绑定了 @keyframes fadeInUp，也不会自动播放动画——因为浏览器需要一个「已渲染但视觉不可见」的初始状态作为动画起点。只写 @keyframes 不等于触发动画，它只是定义了一段时序逻辑。
常见错误包括：
- 元素用
display: none插入，导致完全脱离渲染树，@keyframes根本不执行 - 插入后立刻加动画 class，但没提前设好
opacity: 0; transform: translateY(20px); - 用 JS 同步添加 class 后又立刻修改样式，浏览器合并重排，跳过 from 帧
必须手动设置初始样式并强制重排
动画能播起来的关键，在于让浏览器在「加动画 class 前」就“记住”起始值。这不是靠 CSS 自动推断，而是 JS 主动干预。
正确顺序是：
- 创建元素后，立即设置
el.style.opacity = '0'和el.style.transform = 'translateY(20px)' - 调用
getComputedStyle(el).opacity（或任意可读属性）触发同步重排 - 再添加带
animation的 class，如el.classList.add('animate-in')
示例关键片段：
const li = document.createElement('li');
li.textContent = 'item';
li.style.opacity = '0';
li.style.transform = 'translateY(20px)';
getComputedStyle(li).opacity; // 强制重排
li.classList.add('animate-in');
list.appendChild(li);
animation-fill-mode: forwards 不能省
不加 forwards，动画播完瞬间会回退到 class 添加前的状态。比如你没在默认样式里设 opacity，那动画一结束，opacity 就变回未定义（等价于 1），看起来像闪一下就淡入完成；更糟的是，如果初始用了 opacity: 0，动画结束后它又跳回 0，元素直接消失。
.animate-in 必须包含：
.animate-in {
animation: fadeInUp 0.4s ease-out forwards;
}
而对应的 @keyframes 要显式写出起点和终点：
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
移动端和旧版 Safari 必须加 transform: translateZ(0)
纯 opacity + transform 在 iOS 15.4 之前、部分 Android WebView 中容易闪烁或掉帧，根本原因是没触发 GPU 合成。仅靠 opacity 动画走的是 CPU 渲染路径。
解决方案是轻量级硬件加速：
- 在
@keyframes的from和to中都加上transform: translateZ(0) - 或者用
transform: translate3d(0, 0, 0)，效果一致但语义稍重 - 已有其他
transform（如scale）时，无需重复加，但要确保它出现在 keyframes 里
不这么做，动画在真机上可能卡顿或闪屏，且问题难以复现——只在特定系统版本+滚动场景下暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
