Less中@keyframes必须置于顶层且名称静态，嵌套或变量插值会报错；动画Mixin需显式定义各参数并设animation-fill-mode: forwards；多文件共用关键帧应集中定义并用@import (once)引入；IE11兼容需用0%/100%而非from/to。
Less里写@keyframes会报错？因为不能直接嵌套
Less编译器不识别原生CSS的@keyframes语法块，尤其当你试图把它写在选择器内部、或用变量插值时，会直接抛ParseError: Unexpected token。这不是Less“不支持动画”，而是它把@keyframes当成自定义指令去解析了——而它只认@import@media@function这类内置指令。
正确做法是把@keyframes声明放在顶层（即不在任何选择器或Mixin体内），并确保名字是静态字符串（不能用@name变量拼接）：
/* ✅ 正确：顶层、静态名 */
@keyframes slideIn {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
<p>.my-element {
animation: slideIn 0.3s ease-out;
}如果你硬要动态生成多个关键帧，得靠.each()循环配合~""字符串插值，但仅限于内容体，名字仍需静态。
用Mixin封装动画序列时，为什么animation属性总不生效
常见原因是Mixin里漏写了单位、或animation简写属性覆盖了其他关键配置（比如animation-fill-mode被默认丢掉）。Less本身不校验CSS值合法性，写成animation: fadeIn 300ms（缺单位s）或animation: bounce 1s infinite（没指定animation-timing-function）都能编译通过，但浏览器会静默忽略整条声明。
立即学习“前端免费学习笔记（深入）”；
推荐用带全参数的Mixin，显式控制每个字段：
.animate(@name, @duration, @timing: ease, @delay: 0s, @count: 1, @fill: forwards) {
animation-name: @name;
animation-duration: @duration;
animation-timing-function: @timing;
animation-delay: @delay;
animation-iteration-count: @count;
animation-fill-mode: @fill;
}
<p>.box {
.animate(slideIn, 0.4s, cubic-bezier(0.2, 0.8, 0.4, 1), 0s, 1, forwards);
}- 别依赖
animation简写——它容易因顺序或缺失值导致意外覆盖 -
@fill设为forwards很关键，否则动画结束立刻回退到初始态 - 时间单位统一用
s或ms，不要混用；Less不会帮你转换单位
多个动画序列共用一套关键帧，怎么避免重复编译
Less没有“条件编译”或“已定义检测”，如果在不同文件里都写了@keyframes spin，最终CSS里会出现多份相同声明，白占体积。解决思路不是“防重复”，而是“集中定义+按需引用”。
把所有@keyframes收进单独的animations.less，用@import (once)引入：
// _animations.less
@keyframes rotate360 {
to { transform: rotate(360deg); }
}
@keyframes pulse {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
<p>// component.less
@import (once) "_animations.less";</p><p>.btn {
.animate(rotate360, 2s, linear, 0s, infinite);
}
.card {
.animate(pulse, 1.5s, ease-in-out, 0s, infinite);
}-
@import (once)能防止同一文件被多次导入，但无法跨项目去重——团队协作时得约定规范 - 别用
@import (reference)，它会让@keyframes彻底不输出 - 关键帧名建议加前缀（如
myapp-rotate），避免第三方库冲突
用fade类名做淡入动画，为什么IE11下完全不动
IE11只支持@keyframes的无前缀版本，且不认opacity在from/to里的简写。你写from { opacity: 0; }它能认，但若Less编译后变成0% { opacity: 0; }，IE11就可能跳过整段关键帧——因为它要求百分比必须是0%和100%，且不接受小数。
兼容方案只有两条路：
// ✅ 兼容IE11：用0% / 100%，且补全所有状态
@keyframes fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
<p>// ❌ 不兼容：to/from 或 50.0% 这类写法在IE11里失效
@keyframes fade-bad {
from { opacity: 0; } /<em> IE11 ignore </em>/
to { opacity: 1; }
}- 别在关键帧里用
transform: scale(0)配opacity做复合动画——IE11对transform的支持更脆 - 如果项目必须支持IE11，建议所有关键帧都手写
0%/100%，不用from/to - Less变量不能用于
@keyframes名，所以@name: fade-in; @keyframes @name { ... }会失败
关键帧这东西，表面是CSS语法，实际是浏览器解析器和预处理器两层规则叠加的结果。少一层理解，就多一个白屏的可能。
