不能在@include里动态拼接@keyframes名，因Sass不支持作用域隔离，所有关键帧均挂载全局CSSOM，拼字符串易冲突且阻碍GPU加速；正确做法是每个动画用固定语义化前缀名（如my-fade-in），通过@mixin封装参数控制调用，关键帧内仅用transform和opacity。
直接用 @keyframes 写死在组件里，等于把动画逻辑焊死在 DOM 层级——改一个缓动函数就得全局搜、逐个修，性能还容易掉帧。真正可维护的动画库，必须把关键帧定义和调用逻辑分层，靠 @mixin 封装参数接口，而不是靠复制粘贴。
为什么不能在 @include 里动态拼接 @keyframes 名
Sass 不支持作用域隔离的关键帧名，所有 @keyframes 编译后都挂在 CSS 全局作用域。拼字符串（比如 in-anim-#{$duration}-#{$easing}）看似复用，实际极易冲突，CI 流程里 grep 一跑全是隐患。更严重的是：浏览器无法对这种“伪动态”关键帧做 GPU 加速预判，left、top 类属性还会强制触发布局重排。
正确做法是：
- 每个动画对应一个固定、语义化、带项目前缀的
@keyframes名（如my-fade-in） - 用
@mixin控制它的调用方式（时长、缓动、填充模式等） - 关键帧内部只用
transform和opacity—— 这两类属性能走合成层，不触发重排重绘
@keyframes 必须用 SCSS 变量驱动，而不是硬编码数值
骨架屏扫光动画如果写成 background-position: -100% 0, 200% 0;，后续要统一加宽光条或加快速度，就得手动改所有关键帧里的数字，漏一处就节奏错乱。IE11 降级时也根本没法一键切到 opacity 方案——因为关键帧没预留 fallback 分支。
立即学习“前端免费学习笔记（深入）”；
应该把位移范围、时长、幅度抽成变量，再用 #{} 插值生成规则：
@function skeleton-shine-offset($range: 200%) {
@return (-#{$range} 0, #{$range} 0);
}
@keyframes skeleton-shine {
0% { background-position: #{skeleton-shine-offset(200%)}; }
100% { background-position: #{skeleton-shine-offset(200%)}; }
}
配合根变量声明：
:root {
--skeleton-shine-speed: 1.8s;
--skeleton-shine-amplitude: 200%;
}
这样 JS 也能通过 element.style.setProperty('--skeleton-shine-speed', '2.2s') 实时干预。
模块化导入时，@use 的三个硬约束必须满足
@import 是污染式加载，@use 才是模块化前提。但光换语法不够，还得满足三条规则，否则编译会静默失败或覆盖冲突：
-
_animations.scss必须显式@forward 'core'或@export，否则外部@use后无法访问内部@mixin - 所有
@keyframes名强制加项目前缀（如my-bounce），因为编译后它仍是 CSS 全局作用域，Sass 模块化管不住 - 入口文件里用
@use 'animations' with ($prefix: 'my-')，把前缀变量透传进去，方便未来批量切换
最容易被忽略的是关键帧命名策略——哪怕你用了 @use、写了参数化 @mixin，只要 @keyframes bounce 这种通用名还存在，CI 流程里 grep 出来就是隐患。性能优化也得从这里起步：别让 Sass 生成含 left、top 的关键帧，GPU 友好的只有 transform 和 opacity。
