less动画封装核心是静态@keyframes声明与mixin参数化调用，必须顶层定义固定名称的@keyframes、显式设置animation-fill-mode:forwards，拆分mixin控制维度，多动画用class组合而非嵌套，响应式仅限节奏参数且需媒体查询包裹调用。
Less 本身不支持运行时动画逻辑，所谓“复杂动画封装”本质是用 @keyframes 静态声明 + mixin 参数化调用的编译期组合。关键不是“实现动画”，而是避免重复写帧、错乱覆盖、漏掉 forwards 导致回退。
@keyframes 必须顶层静态声明，不能嵌套或变量插值
很多人在 .animate-spin() 里直接写 @keyframes spin-@{speed}，结果编译失败或输出空——Less 把 @keyframes 当作顶层指令，一旦嵌套进 mixin 或选择器，语法树就崩了。
- ✅ 正确：所有
@keyframes放文件最外层，名称用固定字符串，如@keyframes spin-in、@keyframes pulse-border - ❌ 错误：
@keyframes ~"spin-@{speed}"或写在.btn { @keyframes ... }内部 - ⚠️ 注意：IE11 要求用
0%/100%，不能只写from/to；多文件共用时，统一放在animations/_keyframes.less并用@import (once)引入
用 mixin 拆分控制维度，别堆参数
把 animation-name、duration、fill-mode 塞进一个 .animate(@name, @dur, @easing, @count) 里，传参容易错序，后期想只改时长还得重写整行。
- 推荐拆成独立 mixin：
.animate-name(@name)、.animate-time(@dur: 0.3s)、.animate-fill(@mode: forwards)，可叠加可覆盖 - 必须显式写
animation-fill-mode: forwards，CSS 简写animation不包含它，漏掉会导致动画一结束就回退到初始态 - 单位要统一：全用
s或全用ms，Less 不会自动转换；300ms和0.3s混用可能引发浏览器解析差异
多动画叠加靠 class 组合，不是 mixin 嵌套
想让按钮同时缩放 + 发光 + 边框脉动，别写 .animate-scale().animate-glow().animate-border()——mixin 是文本替换，不是返回样式块，最终会冲突覆盖。
- 可行方式：定义语义 class，如
.is-scaling、.has-glow、.border-pulsing，各自绑定不同@keyframes，HTML 里多 class 控制 - 若必须用逗号写法：
animation: scale-in 0.3s, glow 1s;，注意旧版 Safari 对多动画支持不稳定，生产环境建议 JS 动态切换 class 更可控 - 浏览器按 CSS 声明顺序覆盖，后写的
animation-name会覆盖前面的，除非用逗号明确并列
响应式动画节奏只能靠媒体查询包裹 mixin 调用
别在 mixin 里写 when (@screen = mobile) { animation-duration: 0.2s; }——Less 变量在编译期就固化了，@screen 不会随 viewport 变化。
- 正确做法：在媒体查询块内调用 mixin，如
@media (max-width: 768px) { .btn { .animate-time(0.2s); } } - 动画逻辑本身（帧内容）不能响应式，但播放节奏（时长、延迟、次数）可以，这是唯一安全的动态点
- 如果项目用了 CSS-in-JS 或构建工具自动哈希 keyframes（如 Next.js 的
styled-jsx），手写的@keyframes可能无法被识别，此时应改用 JS 驱动动画
最容易被忽略的是 animation-fill-mode: forwards 的显式声明和 @keyframes 名称的静态性——前者导致动画“闪退”，后者导致编译失败却无报错提示，只输出空白。这两点不解决，其他封装都是空中楼阁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
