常见原因是元素初始不可见且动画未正确过渡，如opacity:0或visibility:hidden但关键帧未设回visible和1，或display:none彻底阻止动画触发。
animation 触发后元素不出现，常见原因是什么
直接写 animation 但元素始终不可见，大概率是动画本身没定义「起始状态可见」，或者元素初始被隐藏（比如 opacity: 0 或 visibility: hidden）但关键帧没正确过渡。
关键点在于：animation 只控制变化过程，不负责“让元素从无到有”。DOM 元素必须已渲染、且未被 display: none 彻底移出流，动画才可能生效。
-
display: none的元素无法触发动画——哪怕你用animation改opacity或transform，它也压根不会开始 - 如果用
visibility: hidden+opacity: 0隐藏，那关键帧里必须显式设回visibility: visible和opacity: 1，否则可能卡在不可见状态 - 动画时长太短（比如
0.01s）或延迟太大（animation-delay: 10s），也会让人误以为“没动”
@keyframes 里 transform 和 opacity 组合怎么写才自然
单纯用 opacity 淡入会显得“平”，加 transform: translateY() 或 scale() 才有进入感。但要注意顺序和默认值：CSS 动画对 transform 的插值更平滑，而 opacity 是线性渐变，两者混用时别漏掉起始态的 transform: none。
示例：一个从下往上淡入微放大的效果
立即学习“前端免费学习笔记（深入）”；
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(20px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
- 必须写
transform: none或具体值，不能留空，否则浏览器可能用上一次的transform值作为起点，导致错位 - 避免在
from里只写transform: translateY(20px)而漏掉scale——这样会把scale默认为1，造成非预期缩放跳变 - 移动端慎用
transform: translateZ(0)强制硬件加速，某些老 Android 浏览器反而会闪屏或卡顿
animation-fill-mode: both 为什么经常被忽略
动画播完就“撤回”到初始样式？那是没设 animation-fill-mode。默认值是 none，意味着动画只影响播放中那一小段时间，结束后立刻还原。
要让元素在动画结束时保持最后一帧状态，必须加 both（兼顾 forwards 和 backwards）：
-
animation-fill-mode: forwards→ 动画结束后停在to状态 -
animation-fill-mode: backwards→ 动画开始前就应用from状态（适合首帧需要预设样式的场景） -
animation-fill-mode: both→ 最常用：既提前应用from，又保留to
典型错误：写了 animation: fadeIn 0.3s，但没加 animation-fill-mode: both，结果动画一闪而过，元素又变回透明。
transition 和 animation 在入场动画里怎么选
纯 CSS 入场动画，优先用 transition 而不是 animation，除非你需要多阶变化（比如先缩再移最后旋转）或循环播放。
transition 更轻量、触发明确（靠 class 切换或伪类），也更容易控制时机：
- 给元素加初始类
.card { opacity: 0; transform: translateY(10px); } - 再写
.card.show { opacity: 1; transform: translateY(0); transition: opacity 0.2s, transform 0.2s; - JS 里只需
el.classList.add('show')——干净、可预测、易调试 -
animation适合复杂路径或需精确时间轴的场景，比如加载骨架、徽标弹跳，但调试成本高，animation-play-state控制也不如 class 切换直观
真正容易被绕进去的是：用 animation 实现简单淡入，却忘了加 animation-fill-mode，又硬塞 JS 监听 animationend 去清理 class——其实一行 transition 就能搞定的事，没必要绕远路。
