有效@keyframes需满足：动画名唯一且不含空格/特殊符（如slidein），0%/100%关键帧必存在，每帧至少含一个可动画属性；animation-name和animation-duration缺一不可，时长须大于0s，需用animation-fill-mode:forwards保持终态，并预先设置元素初始样式防闪烁。
怎么写 @keyframes 才算有效
浏览器只认两个东西：动画名必须唯一，且每个关键帧节点里至少有一个可动画的属性。写完不生效，八成是这两点漏了。
-
@keyframes后面的名字不能含空格或特殊符号，比如@keyframes slide-in会报错，得写成@keyframes slideIn或@keyframes slide_in - 0% 和 100% 必须存在（哪怕只写一个），
from/to是别名，但某些旧版 Safari 对from支持不稳定，建议优先用百分比 - 只写
display: none、height: auto、font-size: clamp(...)这类无法插值的属性，动画会静默失败——查 DevTools 的 Animations 面板，如果看到“no active animation”，基本就是这个原因 - 需要兼容 iOS 15.4 以下或 Android 4.4 WebView？得加
-webkit-@keyframes前缀，且整个规则（包括花括号内）都要复制一遍
animation 属性哪些值不能省
animation-name 和 animation-duration 是硬性依赖项，缺一不可。设了 animation-name: bounce 但没写时长，动画根本不会启动。
-
animation-duration必须大于0s，写成0.001s都行，但不能是0s或直接省略 - 想让动画结束后停在最后一帧？必须显式加
animation-fill-mode: forwards。默认是none，动画一结束就回退到初始样式 -
animation-iteration-count: infinite看似方便，但滚动进视口才触发的动画（比如用 IntersectionObserver 控制）容易造成内存泄漏——每进一次就多开一个无限循环，记得配合animation-play-state: paused手动控制 - 简写语法
animation: bounce 0.6s ease-out 0.2s 1 forwards;中，第 5 个值是animation-fill-mode，不是animation-direction，顺序别记混
为什么动画一加载就闪一下
这是 animation-fill-mode 缺失 + 元素初始状态未对齐导致的典型表现。浏览器在动画开始前按原始 CSS 渲染，动画第一帧又突然跳变，人眼就感知为“闪”。
- 解决办法：给元素提前设好动画起始态。比如
@keyframes fadeIn从opacity: 0开始，那元素 class 就该带opacity: 0初始样式 - 如果起始态由 JS 动态插入（比如通过
innerHTML），务必在插入后、动画 class 加上前，先强制设置初始样式：el.style.opacity = '0'; el.classList.add('animate'); - 慎用
animation-delay: -0.5s想“倒播”补帧——它不会真倒放，只是把起点截断，反而加剧闪烁 - 用
will-change: transform可缓解，但仅对transform/opacity有效；滥用会导致内存占用飙升，尤其在列表项中批量加
怎么让关键帧动画响应点击或滚动
CSS 关键帧本身是声明式的，不支持条件判断，所有“触发”逻辑都靠切换 class 实现。别试图用 :active 直接绑 @keyframes，它只对 transition 友好。
- 基础模式：定义两个 class，一个空载动画（
animation: none），一个满配（animation: slideIn 0.4s forwards），JS 里用el.classList.replace('idle', 'animate') - 防重复触发：加完 class 后立刻用
el.addEventListener('animationend', handler, { once: true })，避免快速连点多次添加同一动画 - 滚动触发动画：IntersectionObserver 回调里加 class 即可，但注意不要在
rootMargin设太激进（如'100px'），否则用户还没看到元素，动画就播完了 - 想暂停/恢复？只改
animation-play-state：CSS 里写.paused { animation-play-state: paused; }，JS 里切这个 class
forwards 和初始 opacity 的配合。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
