@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 被多次声明。浏览器只认最后一个同名定义，前面的全被覆盖。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 比如 @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 友好格式，比调试构建配置更直接。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！