用 Sass Mixin 定义关键帧动画需封装 @keyframes 命名与行为，通过 @content 注入动态帧（支持 from/to 或多段百分比），配合参数控制时长、缓动等，兼顾语义性、复用性与可维护性。
怎么用 Sass Mixin 定义可复用的关键帧动画
直接写 @keyframes 每次改名字、调参数都得复制粘贴，还容易漏掉浏览器前缀或拼错帧名。用 Mixin 就是把「动画行为」抽成函数，传几个参数就能生成一整套规则。
核心思路：Mixin 接收动画名、起止状态、可选的缓动和时长，内部用 @keyframes 动态生成规则，并返回一个带前缀的 animation 声明。
- 必须用
@content或嵌套@keyframes—— 不能只靠字符串拼接，否则无法支持复杂帧（比如30%、from/to混用） - 别在 Mixin 里硬编码
0%/100%；用from和to更语义化，也兼容老浏览器 - 如果项目还要支持 IE10，记得 Mixin 内部补
-ms-前缀，但现代项目通常不用了
@mixin animate-slide($name, $from, $to, $duration: 0.3s, $easing: ease) {
@keyframes #{$name} {
from { @content $from; }
to { @content $to; }
}
animation: #{$name} $duration $easing;
}
Sass 中如何让关键帧支持多段中间状态
纯 from/to 不够用，比如做加载骨架屏需要 0%→50%→100% 三段位移。Sass 本身不支持动态插值多帧，得换招。
最稳的方式是放弃“全自动”，改用「模板 Mixin + 手动帧内容」：Mixin 只负责包裹 @keyframes 和命名，把具体帧写在调用处。这样灵活，也不易出错。
立即学习“前端免费学习笔记（深入）”；
- 别试图用
@each循环生成20%, 40%, 60%—— Sass 编译期无法推导 CSS 帧顺序，容易错乱 - 如果真要减少重复，可以把常用帧组合（如呼吸效果、闪烁节奏）单独封装成小 Mixin，在
@content里调用 - 注意：Sass 的
@content不能接收多个参数块，所以每段帧得写在一个@content调用里，别拆开
@mixin animate-pulse($name) {
@keyframes #{$name} {
@content;
}
animation: #{$name} 1.5s ease-in-out infinite;
}
// 使用
.element {
@include animate-pulse('pulse-fade') {
0%, 100% { opacity: 0.3; }
50% { opacity: 1; }
};
}
为什么用 Sass Mixin 写动画比纯 CSS 类更可控
很多人用 .animate-bounce 这类工具类，但一碰到「同一元素不同持续时间」「不同延迟启动」就卡住 —— 工具类写死参数，没法动态调整。
Mixin 把控制权交还给开发者：时长、延迟、方向、填充模式全都能按需传参，且编译后仍是原生 CSS，没运行时开销。
- 避免滥用
!important覆盖工具类 —— Mixin 生成的样式天然在源码位置，层叠逻辑清晰 - 调试时直接搜
@keyframes fade-in-down就能定位，比在一堆.fade-*类里翻快得多 - 注意：不要把所有动画塞进一个大 Mixin（比如
@include animate($type, $speed, $delay...)），分支太多反而难维护
容易被忽略的性能与兼容性细节
动画性能不只看帧率，更要看触发的渲染流水线。Sass 管不了运行时，但能帮你避开常见坑。
- 别在 Mixin 里默认加
transform: translateZ(0)强制 GPU 加速 —— 现代浏览器已自动优化，乱加反而增加图层合成开销 - 如果 Mixin 支持
$fill-mode参数，务必设默认值为both或forwards，否则动画结束瞬间样式会跳回初始态 - IE11 不支持
animation-play-state，若 Mixin 提供暂停功能，得额外加-ms-前缀并注明限制
真正麻烦的从来不是怎么写出来，而是写完之后——谁来维护那堆带条件判断的 Mixin？参数越来越多，文档没跟上，半年后你自己都看不懂当初为啥要加 $use-bezier 这个开关。
