不能用 scss mixin 动态生成 @keyframes 或拼接 animation-timeline 名，因 scroll() 参数为 css 关键字（非字符串），sass 插值会产出非法 scroll("root")；@keyframes 必须全局提前注册，mixin 调用不触发声明；且 timeline 源稳定性（如 body 尺寸波动）和 animation-range 布局约束无法由编译期 scss 检查或规避。
不能用 SCSS 混入动态生成 @keyframes 或拼接 animation-timeline 名，这不是语法限制问题，而是浏览器渲染机制决定的——滚动时间线必须在样式计算阶段就确定绑定关系，而 SCSS 编译期无法感知 DOM 结构、滚动源稳定性或 layout 是否可缓存。
为什么不能封装成 @mixin scroll-driven-anim？
常见错误是想写一个万能混入，把动画名、duration、scroll source 全部参数化：
@mixin scroll-driven-anim($anim-name, $source: root, $duration: 1s) {
animation: #{$anim-name} #{$duration} linear;
animation-timeline: scroll(#{$source});
}
这会立刻失效，原因有三：
-
scroll()的参数（如root、nearest）不是字符串，是 CSS 关键字，不能用 Sass 变量插值；Sass 编译后变成scroll("root")，浏览器直接忽略 -
@keyframes必须在全局 CSSOM 中提前注册，混入里调用@include不会触发关键帧声明，动画名根本不存在 - 滚动驱动动画的性能敏感点（如是否绑定
body、是否用selector()）必须人工审查，无法靠参数自动规避
真正可复用的 SCSS 组织方式
高性能滚动驱动动画依赖的是「结构约定」而非「逻辑封装」。SCSS 能做的只有三件事：
- 统一定义语义化动画名，例如
@keyframes fade-in-scroll、@keyframes slide-up-view，全部固定命名，不拼接 - 用变量控制关键帧内数值（如位移量、透明度起止值），便于批量调整：
$slide-up-distance: 40px - 为常用 timeline 场景预设类名，避免手写重复规则，例如：
.anim--fade-in-scroll {
animation: fade-in-scroll 1s linear forwards;
animation-timeline: scroll(root);
}
.anim--slide-up-container {
animation: slide-up-container 1s ease-out forwards;
animation-timeline: --container-tl;
}
注意：--container-tl 必须由容器显式声明：scroll-timeline-name: --container-tl，这个声明不能进混入——它要和容器高度、overflow 状态强绑定。
容易被忽略的性能断点
滚动驱动动画卡顿，90% 不是因为写法错，而是 timeline 源本身不稳定。这些细节 SCSS 做不了检查，但你在写类名时必须盯住：
- 绝不要给
html或body设scroll-timeline-name—— 它们的尺寸受 viewport、zoom、OS 缩放影响，浏览器无法缓存 layout - 如果用
animation-range: entry 0% exit 100%，目标元素必须有明确 height，且父容器不能是height: auto，否则每次滚动都触发 relayout -
view()时间线比scroll()更吃性能，尤其当多个元素共用同一view-timeline时，浏览器要反复查 visibility 矩阵
最稳妥的做法：每个滚动驱动动画只绑定一个固定高度容器（如 height: 100vh 的 section），动画属性仅用 transform 和 opacity，其余一律交给 IntersectionObserver + requestAnimationFrame 补位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
