直接用@duration和@delay变量控制动画时长与延迟，需避开@keyframes内部；封装.animate() mixin支持默认值与按需覆盖；@keyframes中不可用less变量，应改用css自定义属性--duration配合var()实现动态调整。
直接用 @duration 和 @delay 变量控制播放速度和延迟，但必须避开 @keyframes 内部——那里不认 Less 变量。
用变量统一管理 animation-duration 和 animation-delay
别在每个选择器里硬写 0.3s 或 0.1s。定义两个顶层变量，让时长和延时可全局调整：
@duration: 0.3s;@delay: 0.1s;.card { animation: fadeIn @duration ease-out @delay; }
注意：@duration 和 @delay 必须是合法单位值（如 0.3s、200ms），不能写成 @animation-duration 这类带连字符的——Less 会当成减法运算，报错 Operation on an invalid type。
封装 .animate() mixin 支持按需覆盖
全局变量只解决“统一”，实际项目里按钮要快、弹窗要慢、加载条要带 stagger 延迟——得靠 mixin 灵活传参：
.animate(@dur: @duration, @del: @delay, @easing: ease) { animation: fade-in @dur @easing @del;}
使用时：
.btn { .animate(0.15s, 0s); }.modal { .animate(0.4s, 0.2s, ease-out); }
关键点：
-
@dur和@del设默认值，不传就走全局节奏 - 别把
animation-name（如fade-in）也塞进这个 mixin——它和时间参数维度不同，混在一起反而难维护 - 如果动画类型多（slide/fade/scale），建议拆成
.animate-slide()、.animate-fade()，而不是堆一堆可选参数
@keyframes 里不能用 Less 变量，但可以用 CSS 自定义属性
@keyframes 是纯 CSS 上下文，Less 编译时不会解析里面的 @duration。下面写法无效：
@keyframes spin { to { transform: rotate(360deg); } animation-duration: @duration; // ❌ 编译失败}
替代方案：用 CSS 变量（--duration）配合 var()：
:root { --duration: 0.3s; }@keyframes spin { to { transform: rotate(360deg); } animation-duration: var(--duration); // ✅ 有效}
这样既能复用同一套 @keyframes，又能通过 JS 或 class 动态改 --duration，比 Less 变量更灵活。但注意：CSS 变量不支持 Less 的编译期计算（比如 @i * 0.2s），只能运行时生效。
生成 stagger 延迟序列时，单位与插值必须显式写出
要用递归 mixin 生成 .item-1 到 .item-5 的逐帧延迟，常见错误是漏单位或插值语法：
.generate-stagger(@i: 1) when (@i <br><code> .item-@{i} { animation-delay: @i * 0.1s; } .generate-stagger(@i + 1);}
注意：
-
@i * 0.1s中的s必须显式写，@i * 0.1默认是数字，不会自动转成秒 -
@{i}必须用花括号包裹才能正确插值，.item-@i会编译成.item-@i而不是.item-1 - 递归调用
.generate-stagger(@i + 1)不能漏，否则只生成第一个
超过 10 个 stagger 类时，CSS 体积增长明显，且浏览器解析负担加重——这时该交给 JS 控制 animation-delay，Less 只负责基础样式骨架。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
