元素没动是因为漏写 animation-name 或未设 animation-duration；css 动画需显式指定名称和时长才能执行，@keyframes 仅定义轨迹不触发播放。
用 @keyframes 定义动画时，为什么元素没动？
常见原因是漏写了 animation-name 或没给元素加 animation-duration。CSS 动画不会自动播放，必须显式指定持续时间，哪怕只是 0.01s。
-
@keyframes只是定义动画轨迹，不触发执行 - 必须在目标元素上同时设置
animation-name和animation-duration（或简写为animation） - 若只设
animation: spin 2s但没定义@keyframes spin，控制台不会报错，但动画静默失效 - 注意浏览器前缀：现代浏览器已无需
@-webkit-keyframes，但 iOS Safari 15.4 之前对animation-timeline等新特性仍需兼容处理
animation-timing-function 选 ease 还是 steps()？
做“动态图”（如 sprite 表逐帧播放、LED 风格闪烁、像素风切换）时，steps() 是刚需；用 ease 会导致过渡模糊、失真。
-
steps(4, end)表示把动画均分成 4 帧，每帧停在区间终点；steps(4, start)则停在起点 - 配合
background-position实现雪碧图动画时，帧数必须与图中列/行数严格一致 -
steps(1)可模拟开关式切换（比如 loading 指示器的 on/off 闪动），比toggle+ JS 更轻量 - 注意：Firefox 对
steps()的起始行为兼容性略异，建议统一用steps(N, end)并测试首帧是否延迟
用 animation-play-state 控制动效启停，但鼠标移入后卡住不动？
典型陷阱是把 animation-play-state: paused 写在 hover 规则里，却没在默认状态设 running，导致首次 hover 无响应。
- 初始状态必须显式声明
animation-play-state: running，否则元素从无动画态进入 paused 态，等于没动过 - 暂停后修改
animation-delay不会重置计时器；如需重新开始，得先paused再running，或用animation: none清除后重设 - 在
prefers-reduced-motion: reduce下，应主动降级：用@media (prefers-reduced-motion: reduce)把animation设为none或改用transform微调
用 background-image + animation 做 GIF 替代方案，为何加载慢或闪白？
核心问题在于图片未预加载，且 CSS 动画触发时机不可控。浏览器不会为仅出现在 @keyframes 中的 background-image 提前解码。
- 在 HTML 中用
<img src="sprite.png" alt="" loading="eager" style="max-width:90%" style="max-width:90%" style="position: absolute; opacity: 0">预加载 - 避免在
@keyframes中用background-image: url(...)切换不同图，应固定一张雪碧图，只动background-position - 大尺寸 sprite 图建议压缩为 WebP，iOS Safari 对 PNG 的帧间复用支持弱，易出现解码卡顿
- 不要依赖
animation-fill-mode: forwards保持最终帧——它只保留结束时的样式值，不维持图片解码状态
will-change 设置和 GPU 加速边界。一个 div 单纯加 animation: move 1s 不会自动启用硬件加速；得配合 transform: translateZ(0) 或 will-change: transform 才能稳定跑满 60fps，尤其在安卓低端机上。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
