@keyframes必须顶层静态声明，嵌套或变量插值会导致编译失败或静默丢弃；多文件共用需@import (once)集中引入；IE11仅支持0%/100%写法，禁用from/to。
@keyframes 不能嵌套，否则编译器直接丢弃整块
Less 把 @keyframes 当作顶层指令处理，一旦写在选择器、Mixin 或媒体查询内部，编译器就无法识别其语法结构——不是“不支持”，而是作用域模型根本不允许。常见错误现象包括：
-
.btn { @keyframes bounce { } }→ 编译报错或输出空内容 -
.animate(@name) { @keyframes @{name} { } }→ 触发ParseError: Unexpected token - 即使没报错，嵌套的
@keyframes也会被静默跳过，最终 CSS 里根本不存在该关键帧
多文件共用关键帧时，重复 @import 导致命名冲突
多个 Less 文件各自 @import "animations.less"（未加 (once)），会导致同一组 @keyframes 被多次声明。浏览器只认最后一个同名定义，前面的全被覆盖。
- 比如
@keyframes slide-in在 A.less 和 B.less 中各出现一次，最终生效的只有 B 中的版本 - 解决方法：统一集中定义在
animations/_keyframes.less，所有引用处写@import (once) "animations/_keyframes.less"; - 注意：
@import (once)是 Less 层面的去重，不是 CSS 层面的；它防止重复解析，但不改变输出顺序
动画名用了变量插值却没转义，导致生成无效 CSS
写 @keyframes @{prefix}-slide 会失败，因为 Less 尝试把它当变量运算，而非字符串字面量。必须用 ~"@{prefix}-slide" 强制按原样输出。
- 漏掉波浪号
~：编译器报错或输出@keyframes undefined-slide - 前缀变量未提前定义或拼写不一致：
@prefix: card;声明了，但调用时写成~"@{Prefix}-slide"（大小写错）→ 名字对不上，animation: card-slide不触发 - 前缀含非法字符（如空格、
/、括号）：~"@{prefix}/slide"即使加了~也无法挽救，浏览器拒绝解析
IE11 下 from/to 写法被忽略，误以为是 CSS 合并问题
IE11 不识别 from 和 to 关键字，只认 0% 和 100%。如果关键帧里混用这两种写法，IE11 会整个跳过该 @keyframes 块，动画完全不执行——看起来像“被合并掉了”，其实是被浏览器静默丢弃。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
@keyframes fade { from { opacity: 0; } to { opacity: 1; } } - 正确写法：
@keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } } - 更稳妥的做法：所有项目统一禁用
from/to，团队约定只用百分比，避免 CI 构建后才发现 IE 兼容失效
@keyframes 的“合并异常”几乎从不来自 CSS 压缩或 PostCSS 工具链，而是 Less 编译阶段就已出错——要么没生成，要么名字错，要么被覆盖。检查编译后的 CSS 文件，先确认关键帧是否真实存在、名称是否匹配、语法是否为 IE 友好格式，比调试构建配置更直接。 
