@keyframes定义动画必须包含0%和100%（或from/to），命名需符合CSS标识符规范且区分大小写，关键帧内仅支持可动画属性，定义后须通过animation属性绑定才生效。
@keyframes 定义动画帧时，必须用百分比或 from/to
直接写 @keyframes 但没给关键时间点，浏览器会完全忽略整个规则。常见错误是只写 0 或 100 而不加 %，比如 0 → 0%，否则无效。
支持两种写法：from/to（语义清晰，适合两帧）或 0%/50%/100%（灵活控制中间状态）。不能混用，比如 from 和 50% 同时出现会导致部分浏览器解析失败。
-
from等价于0%，to等价于100%，但不能和百分比数值共存 - 至少要有
0%和100%，否则动画不会触发 - 百分比值必须是数字加
%，写成.0、0.0或0px都不合法
动画属性名不能带引号，也不能用连字符开头
@keyframes 后面跟的是动画名称标识符，不是字符串。写成 @keyframes "slide" 或 @keyframes -slide 都会报错，浏览器直接跳过该规则。
命名要符合 CSS 标识符规范：只能含字母、数字、下划线 _、短横线 -，且不能以数字或短横线开头。例如 slide-in ✅，1slide ❌，-slide ❌。
立即学习“前端免费学习笔记（深入）”；
- 动画名区分大小写，
rotate和Rotate是两个不同动画 - 不要用 JS 变量名风格（如
slideIn），CSS 里不支持驼峰，统一用短横线分隔 - 避免和 CSS 原生关键字冲突，比如
linear、ease虽然不报错，但易混淆
关键帧内只能写可动画的 CSS 属性
不是所有 CSS 属性都能在 @keyframes 里用。比如 display、content、z-index 无法产生过渡效果，写了也不会报错，但动画过程中不会变化。
真正能平滑过渡的属性有限，常用且安全的包括：transform、opacity、color、background-color、width/height（需有明确初始/结束值）等。其中 transform 和 opacity 性能最好，推荐优先使用。
-
left/top触发重排，性能差；改用transform: translateX()更高效 - 颜色类属性（如
border-color）支持动画，但必须两端都是合法颜色值，transparent和#fff可以，inherit不行 - 单位要一致，
0→100px可以，但0→100%在某些属性上可能无效（如font-size）
定义完关键帧后，必须用 animation 或 animation-name 应用才生效
@keyframes 只是声明，不绑定到元素上就等于没写。常见疏漏是只写了关键帧，忘了在目标元素上加 animation-name 或简写的 animation。
绑定时注意：动画名必须和 @keyframes 后的名称完全一致（包括大小写），且元素需有明确的 animation-duration，否则即使名字对了也看不到效果——默认时长是 0s，动画瞬间完成。
-
animation: slide-in 0.3s ease;是最简写法，0.3s不能省略 - 单独设
animation-name: slide-in;时，必须同时设animation-duration，否则无效 - 动画名拼错、大小写错、多空格（如
slide- in）都会导致静默失败，DevTools 的 “Animations” 面板里看不到该动画
实际用的时候，最容易被卡住的不是语法，而是：关键帧写了但没检查是否被正确引用，或者用了不可动画的属性还反复调时长。动效一卡，先看 DevTools 的动画面板有没有列出你的动画名，再核对元素上 animation 声明是否完整。
