@keyframes必须顶层声明，不能嵌套在mixin或选择器内；正确做法是静态命名、用~"@{prefix}-name"动态拼接，mixin仅负责应用动画而非生成关键帧。
为什么不能在 mixin 里直接写 @keyframes
Less 编译器把 @keyframes 当作顶层指令，一旦嵌套在 .animate() 或选择器内部，就会报 ParseError: Unexpected token 或静默丢弃整块。这不是语法不支持，而是作用域模型根本不允许——它和 @import、@media 同级，必须出现在文件最外层、无任何包裹。
常见错误现象：
• .btn { @keyframes hover-bounce { ... } } → 编译失败
• .animate(@name) { @keyframes @{name} { ... } } → 输出空或报错
正确做法是：所有 @keyframes 必须静态命名、顶层声明，例如：@keyframes slide-in、@keyframes pulse-border，不能含变量插值（除非用 ~"" 转义且仅用于名称拼接）。
@keyframes 名称怎么动态又安全
想让不同模块的动画名带前缀（如 card-slide、input-pulse），又不想硬编码，就得靠 ~"@{prefix}-slide" 强制字面量输出。但要注意：
-
@prefix必须提前定义（如@prefix: card;），且调用处与声明处一致 - 名称中不能含空格、
/、括号等非法字符，否则~""也救不了 - 大小写敏感：
@keyframes CardSlide和animation: ~"cardslide"不匹配 - IE11 兼容需用
0%/100%，不能只写from/to
示例：
@prefix: card;<br>@keyframes ~"@{prefix}-slide" { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } }
如何用 mixin 封装「应用动画」而非「生成关键帧」
Mixin 的职责是绑定动画到元素，不是声明关键帧。一个干净的 .animate-slide() 应只做三件事：指定 animation-name、传入时长/缓动、补全 animation-fill-mode: forwards（这个常被简写漏掉，导致动画结束回退）。
推荐拆分维度，避免堆参数：
• .animate-name(@name)
• .animate-time(@dur: 0.3s)
• .animate-fill(@mode: forwards)
可叠加、可覆盖，比 .animate(@name, @dur, @easing, @count) 更可控。
单位必须统一：0.3s 和 300ms 混用可能引发浏览器解析差异；@duration: 0.3s 这类变量必须带单位，否则 Less 会当成数字参与运算（@duration - 0.1 报错）。
多动画叠加和响应式节奏怎么处理
多个动画同时生效（比如缩放 + 发光 + 边框脉动），不要用 mixin 嵌套调用：.animate-scale().animate-glow() 是文本替换，最终 CSS 层叠会覆盖，不是叠加。
可行方式：
• 定义语义 class：.is-scaling、.has-glow、.border-pulsing，各自绑定独立 @keyframes
• HTML 中多 class 控制：<button class="is-scaling has-glow"></button>
• 若必须逗号写法：animation: scale-in 0.3s, glow 1s;，注意旧版 Safari 支持不稳定
响应式节奏只能靠媒体查询包裹 mixin 调用：@media (max-width: 768px) { .btn { .animate-time(0.2s); } }
别在 mixin 内写 when (@screen = mobile) —— Less 变量编译期就固化了，运行时无效。
真正容易被忽略的是 animation-fill-mode: forwards 的显式声明，以及 @keyframes 必须集中放在 animations/_keyframes.less 并用 @import (once) 引入，否则多文件重复定义会导致覆盖或冲突。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
