@keyframes名称必须为静态字符串，因CSS标准要求浏览器可索引、可调试、可grep匹配；唯一安全方式是将@for/@each循环封装进@mixin，再显式@include调用，生成带项目前缀的固定名称关键帧（如my-skeleton-shine-slow）。
@keyframes 名称不能动态生成——Sass 顶层不支持变量插值，浏览器也要求关键帧名是静态字符串。所谓“动态生成”，本质是用 @mixin 封装循环逻辑，在调用时展开为多个固定名的关键帧。
为什么 @for $i from 1 through 3 { @keyframes name-#{$i} { ... } } 会报错
Sass 编译器在顶层作用域拒绝 #{$i} 插值进 @keyframes 名，错误类似 Invalid CSS after "@keyframes name-": expected identifier。这不是编译器 bug，而是 CSS 标准强制要求关键帧名必须可被浏览器索引、可被 DevTools 定位、可被 CI 工具 grep 精确匹配。
- 所有
@keyframes最终都挂载到全局 CSSOM，拼字符串极易冲突（比如两个组件都生成slide-1） - 动态名会导致 GPU 加速失效：浏览器无法预判动画结构，
left/top类属性还会触发重排 - CI 流程中一旦出现
fade-in-#{$duration}这类写法，grep -r "fade-in"就失去意义
用 @mixin + @for 安全批量生成固定名关键帧
把循环收进 @mixin，每次调用产出一组命名可控、带项目前缀的关键帧，例如 my-skeleton-shine-slow、my-skeleton-shine-fast：
@mixin generate-skeleton-shine($speeds...) {
@each $speed in $speeds {
$name: 'my-skeleton-shine-' + $speed;
@keyframes #{$name} {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
}
}
@use 'sass:math';
@include generate-skeleton-shine('slow', 'fast', 'medium');
- 名称必须含项目前缀（如
my-），避免第三方库冲突 - 不要用
@import引入动画文件——它污染全局；改用@use 'animations' as anim -
@keyframes内只用transform和opacity，确保走合成层 - 数值全部抽成变量：
$shine-range: 200%，后续批量调整才可控
多段关键帧动画别用循环“自动”生成
需要 0% → 50% → 100% 三段位移？别写 @each $p in (0%, 50%, 100%) { #{$p} { ... } }——Sass 编译期不保证帧顺序，且 CSS 标准禁止非字面量关键帧名。
- 正确做法是写一个模板
@mixin keyframes-template($name) { @keyframes #{$name} { @content; } } - 具体帧内容手动写在调用处：
@include keyframes-template('my-skeleton-scan') { 0% { ... } 50% { ... } 100% { ... } } - IE11 降级方案不能靠循环自动补
opacityfallback，得单独维护一套备选规则
真正难的不是“怎么生成”，而是让每个生成出的关键帧名都语义清晰、可追溯、不冲突——名字一旦定死，就等于锁定了动画的调试路径和上线节奏。漏掉前缀、混用 @import、在关键帧里写 left，三个小动作就能让整个动画库在半年后变成技术债黑洞。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
