@keyframes必须包含0%和100%关键帧，否则浏览器静默丢弃；仅transform、opacity等属性支持平滑动画；animation-name须严格匹配大小写与符号；animation-fill-mode:forwards可保留末帧样式。
@keyframes 必须含 0% 和 100%，否则动画根本不会启动——这不是建议，是浏览器强制规则。
为什么动画完全不播放？检查 @keyframes 是否缺首尾关键帧
常见错误现象：@keyframes slide { 25% { transform: translateX(100px); } 100% { transform: translateX(0); } } → 页面毫无反应。
原因：浏览器要求至少声明起始（0% 或 from）和结束（100% 或 to）两个锚点，否则整条 @keyframes 规则被静默丢弃。
实操建议：
- 永远显式写出
0%和100%，别依赖from/to别名（旧版 Safari 对别名兼容性差） - 即使想让元素“从中间态开始动”，也要在
0%中设该状态，而不是删掉它 - 中间帧（如
25%、50%）可自由增减，但首尾缺一不可
哪些 CSS 属性能放进 @keyframes？哪些会失效
不是所有属性都支持插值动画。无效属性会导致该帧“跳过”或回退到初始值，且不报错。
常见踩坑场景：
-
display: none→display: block：无效，display不可插值 -
width: 100px→width: auto→width: 200px：中间的auto被忽略，直接从 100px 线性变到 200px -
height: auto、margin: auto、font-family、background-image: url(...)：均不支持平滑过渡
推荐优先使用：
-
transform（translateX、scale、rotate）→ GPU 加速，不触发重排 -
opacity→ 高性能，无布局影响 -
color/background-color→ 统一用hsl()更易控色相过渡
多个动画叠加时，@keyframes 名称和 animation-name 怎么配对
名称大小写、连字符、空格全部严格匹配。写错一个字符，动画就静默失效。
常见错误现象：
-
@keyframes fadeIn但 CSS 中写animation-name: fadein→ 无效 -
@keyframes loading-spin但调用时没加引号：animation: loading-spin 1s infinite→ 在部分浏览器中解析失败 - 多人协作时命名风格不统一（
slide_invsslideInvsslide-in）→ 动画随机消失
实操建议：
- 项目初期约定命名规范，例如全小写 + 中划线（
fade-in-card） - 调试时打开 DevTools → Elements → 选中元素 → Styles 面板，看
animation-name是否被划掉（表示未命中） - 多个动画逗号分隔：
animation-name: bounce, fade-in, spin，对应每个@keyframes都必须存在
动画播完就“弹回去”？关键在 animation-fill-mode
默认情况下，动画结束后元素立刻恢复初始样式。这不是 bug，是默认行为。
比如 @keyframes slide { from { transform: translateX(-100px); } to { transform: translateX(0); } }，播完后元素会瞬间跳回 translateX(-100px)。
解决方法只有一处设置：
-
animation-fill-mode: forwards→ 保留末帧样式（即100%或to的状态） - 注意：
forwards不影响动画过程，只控制“结束后停在哪” - 如果同时用了
animation-direction: alternate，仍只需在0%和100%正向写，不用反着定义
这个属性非常容易被忽略，尤其在做加载完成态、表单提交反馈等“一次性动画”时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
