关键帧名必须静态、带前缀、全局唯一；所有@keyframes编译后落在css全局作用域，sass不支持局部作用域或动态生成，拼接字符串易冲突且无法共享渲染缓存。
关键帧名必须静态、带前缀、全局唯一
所有 @keyframes 编译后都落在 CSS 全局作用域，Sass 不支持局部作用域或动态生成隔离的关键帧名。拼接字符串（比如 fade-in-#{$duration}-#{$easing}）看似灵活，实则极易冲突：CI 流程里 grep 一跑全是隐患，浏览器也认为这是多个独立动画，无法共享渲染缓存，还可能因名称过长触发 CSSOM 限制。
- 统一在
_animations.scss中定义，名称带项目前缀，如@keyframes my-fade-in - 禁止用
@import加载该文件——它会污染全局命名空间；改用@use 'animations' as anim - 关键帧内部只用
transform和opacity：这两类属性走合成层，不触发重排重绘 - 别硬编码数值，用 SCSS 变量驱动，比如
$anim-fade-duration: 0.3s，后续批量调整才可控
@mixin 封装调用逻辑，而非整条 animation 值
写 @mixin anim($value) { animation: $value; } 是最常见也最危险的偷懒方式——它断掉了对关键帧内容的控制权。一旦要微调起始缩放值或填充模式，就得重写整个 @keyframes，复用性归零。
- 每个动画配一个同名
@mixin（如@mixin fade-in），参数仅控制调用行为：$duration、$easing、$fill-mode等 -
@mixin内部只负责设置animation-name、animation-duration等分离属性，不侵入关键帧内容 - 避免复合写法
animation: fade-in 0.3s ease 0.1s—— 某处只覆盖其中一项（比如 hover 时只写animation: fade-in 0.2s），其余项就会回退到初始值，导致延迟消失、序列错位
多段关键帧必须手动编写，拒绝顶层循环生成
Sass 编译期无法保证 @each 循环生成的帧顺序，且 CSS 标准明确要求关键帧名必须是静态字符串。试图用循环插值 0%, 20%, 40% 会直接报错，或生成不可预测的帧顺序。
- 写一个包裹型
@mixin keyframes-template($name)：@keyframes #{$name} { @content; } - 具体帧写在调用处：
@include keyframes-template('my-skeleton-scan') { 0% { background-position: -100% 0; } 100% { background-position: 200% 0; } } - 高频组合（如呼吸、闪烁）可单独封装小
@mixin，在@content里调用，但不要拆成多个@content块
时序参数必须收进 map，关键帧与声明共用同一数据源
常见翻车是只改了 animation 属性里的 duration，却忘了关键帧内部的 opacity 过渡节奏也依赖该值——结果视觉节奏断裂，像卡顿两帧。
- 定义
$anim-seq: ("fade": (duration: 0.3s, easing: ease-out))这类 map，键名和关键帧名保持一致 - 关键帧本身不能调
map-get()，但至少声明层（如.box）和调用层共用同一份数据源 - 真正要让关键帧响应变量，得靠
@content+ 手动传入帧逻辑，@mixin只管命名和包裹
真正难的不是写几个 @mixin，而是守住那条线：关键帧名必须静态、语义化、带前缀；调用逻辑必须参数化、可预测、不侵入关键帧定义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
