一个生效的@keyframes规则需满足：名称无空格/特殊符、至少含from/to或百分比节点、属性值可插值；animation-name须完全匹配且大小写一致；必须设置animation-duration且不为0s；兼容旧版需添加@-webkit-keyframes等前缀。
怎么写一个能生效的 @keyframes 规则
浏览器只认严格符合语法的 @keyframes 块，漏掉花括号、拼错 from/to、或者在规则里写 display: none 这类不支持动画的属性，都会让整个关键帧静默失效——查不到报错，但动画就是不动。
-
@keyframes名字不能含空格或特殊符号，推荐用slideIn而不是slide in或slide-in（后者虽部分浏览器支持，但 Safari 旧版会忽略） - 必须至少定义一个关键帧节点：
from、to或百分比值（如50%），空规则会被直接丢弃 - 动画属性只支持可计算、可插值的值，比如
opacity、transform、color；height虽然能动，但设为auto就会卡在初始帧，得用具体数值或max-height替代
animation-name 对不上怎么办
这是最常被忽略的连接断点：@keyframes 定义的名字和 animation-name 的值必须**完全一致**，包括大小写。CSS 是区分大小写的，fadeIn 和 fadein 是两个不同动画。
- 检查是否在
@keyframes外部多写了分号，比如@keyframes fade { ... };—— 分号会让规则提前终止，后续样式表里的animation-name: fade就找不到目标 - 如果用 CSS-in-JS 或构建工具（如 PostCSS），确认它没自动哈希或重命名
@keyframes名称；Webpack 的css-loader默认开启modules时，局部作用域会切断引用 - 浏览器开发者工具的
Computed面板里看不到animation-name值？先看Styles面板里该属性是否被划掉——可能是拼写错误，也可能是层叠被更高优先级规则覆盖
为什么加了 animation 却没触发
关键帧定义了，名字也对上了，但元素还是纹丝不动，大概率是缺少「触发条件」：CSS 动画不会主动播放，它依赖属性变化或显式声明来启动。
Ztoy网络商铺多用户版
下载
在原版的基础上做了一下修正：增加1st在线支付功能与论坛用户数据结合，vip也可与论坛相关，增加互动性vip会员的全面修正评论没有提交正文的问题特价商品的调用连接问题删掉了2个木马文件去掉了一个后门补了SQL注入补了一个过滤漏洞浮动价不能删除的问题不能够搜索问题收藏时放入购物车时出错点放入购物车弹出2个窗口修正定单不能删除问题VIP出错问题主题添加问题商家注册页导航连接问题添加了导航FLASH源文
- 确保元素有
animation-duration（哪怕设成0.01s），值为0s或省略时，动画不执行 - 检查是否被
animation-play-state: paused锁住，尤其是 JS 动态控制后忘了恢复 - 父元素设了
overflow: hidden且动画涉及位移时，可能裁剪掉过渡过程，看起来像“没动”；用outline或临时加border确认元素实际位置是否变化 - 刚插入 DOM 的元素，如果立即加
animation类名，部分浏览器（特别是 Chrome）会跳过首帧；加个setTimeout(() => el.classList.add('animate'), 0)或用el.offsetHeight强制重排可绕过
IE 和老版 Safari 对 @keyframes 的兼容陷阱
IE10+ 支持标准写法，但必须带 -ms- 前缀；Safari 8 及更早版本要求 @-webkit-keyframes，而且不支持 from/to，只认百分比写法。
立即学习“前端免费学习笔记（深入）”；
- 别只写
@keyframes就以为万事大吉，生产环境至少补一行@-webkit-keyframes，内容完全一致 - Safari 5.1–6.0 不支持
animation-fill-mode: forwards，动画结束后样式会回退，得用 JS 监听animationend手动设最终态 - 所有前缀版
@keyframes必须放在标准版之前，否则某些旧引擎会忽略后面的规则 - 如果用 Autoprefixer，确认配置里
browsers包含目标环境，例如"> 1%, last 2 versions, IE >= 10"
关键帧本身没那么难，难的是它藏在样式链深处，一环断就全黑盒。调试时先盯死三件事：名字拼对没、duration 有没、浏览器到底读到哪条规则——其他都是衍生问题。
