Less中需用递归mixin（如.animate-rotate(@n, @i: 1)）批量生成@keyframes关键帧，因Less仅编译CSS、不执行动画；须手动展开变量，避免误将Less变量当运行时值使用。
Less 里怎么用循环写旋转动画的 @keyframes
直接说结论：Less 本身不执行动画，它只是编译期生成 CSS；真正起作用的是编译后输出的 @keyframes 规则。用 .loop() 或递归 mixin 配合 @counter 变量可以批量生成关键帧，但必须确保最终输出符合 CSS 动画语法规范。
常见错误是把 Less 变量当运行时值用，比如写 transform: rotate(@i * 30deg) 却没在 mixin 内正确展开 —— 编译器不会自动推导循环次数，得靠递归或预设步长。
- 推荐用递归 mixin，控制力强、逻辑清晰：
.animate-rotate(@n, @i: 1) when (@i =< @n) { @{i * 10}% { transform: rotate(@i * 36deg); } .animate-rotate(@n, (@i + 1)); } - 调用时写
.animate-rotate(10)，生成 0%～100% 共 11 帧（含 0% 起始态），注意@i * 10%是为了均匀分布，不是硬编码 - 别用
for—— Less 没有原生 for 循环，所谓 “for” 插件或第三方库会破坏构建稳定性，CI 环境容易出错
为什么生成的 @keyframes 在浏览器里不动
大概率是动画规则没被正确引用，或者触发条件缺失。Less 编译后只是静态 CSS，不会自动挂载动画到元素上。
典型场景：你写了 @keyframes spin，但没在某个 class 里加 animation: spin 1s linear infinite；或者用了 animation-play-state: paused 却忘了改回来。
立即学习“前端免费学习笔记（深入）”；
- 检查浏览器开发者工具的 Elements 面板，确认目标元素是否真的应用了带
animation的 class - 确认
@keyframes名称拼写一致，大小写敏感，且没有被 CSS 优先级更高的规则覆盖 - 如果用了
transform: rotateZ()，注意某些旧版 Android WebView 不支持缩写，得写全rotateZ(45deg) - 避免在
@keyframes里混用transform和left/top—— 浏览器可能跳过硬件加速，导致卡顿
用 Less 循环做动画和纯 CSS 写的区别在哪
核心差异在可维护性和动态性：Less 循环适合需要参数化控制的场景，比如设计系统中统一调整旋转节奏、分段数、延迟偏移；纯 CSS 写死更轻量，但改一处就得手动算一堆百分比。
性能上没区别 —— 编译完都是标准 CSS，浏览器解析成本一致。但 Less 层面的抽象可能带来意外开销：比如递归深度超限（默认 256 层），或生成冗余帧（如每 1% 一帧，100 帧毫无必要）。
- 一般 8–12 帧足够表现平滑旋转，别盲目堆数量
- 如果只需要匀速转圈，根本不用循环，
0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(180deg); }两行搞定 - 要变速（比如先快后慢），才值得用循环生成中间态，配合
cubic-bezier()控制 timing-function
IE 或老版本 Safari 下旋转动画失效怎么办
不是 Less 的问题，是 CSS 兼容性断层。IE10+ 支持 @keyframes，但需要 -ms- 前缀；Safari 8–12 需要 -webkit-；iOS 12.2 之前对 transform: rotateZ() 支持不稳定。
Less 本身不处理前缀，得靠 Autoprefixer 这类工具补全。如果你跳过了这步，编译出来的 CSS 在老浏览器里就是裸奔状态。
- 别在 Less 里手写
-webkit-@keyframes—— 维护成本高，且现代构建链路已淘汰手动前缀 - 确认构建流程中启用了 Autoprefixer，并设置了目标浏览器范围（如
"supports": ["> 1%", "last 2 versions"]） - 测试时用真实设备或 BrowserStack，别只信 Can I Use 的表格 —— 某些 iOS WebKit 补丁行为和文档不一致
事情说清了就结束。最常被忽略的是：动画是否真正被触发，而不是“有没有写出来”。
