不能。Firefox 的 scrollbar-width 和 scrollbar-color 以及 WebKit/Blink 的 ::-webkit-scrollbar 系列伪元素均不支持 transition 或 animation，浏览器静默忽略；只能通过 class 切换容器的 opacity、transform、border 等可动画属性间接模拟过渡效果。
Firefox 中 scrollbar-width 和 scrollbar-color 能否触发 CSS 过渡？
不能。Firefox 的 scrollbar-width 和 scrollbar-color 是**非过渡属性**，对它们使用 transition 完全无效。浏览器明确不支持这些属性的动画——既不会平滑变化，也不会报错，只是静默忽略。如果你在 devtools 里看到 transition 声明但滚动条样式毫无渐变效果，就是这个原因。
Chrome/Edge/Safari 中伪元素 ::-webkit-scrollbar 系列能否加 transition？
也不能。所有基于 ::-webkit-scrollbar 的伪元素（如 ::-webkit-scrollbar-thumb、::-webkit-scrollbar-track）**不支持任何 transition 或 animation**。尝试给 background-color 或 width 加 transition: background-color 0.3s，结果只会是“瞬间切换”，没有中间帧。这是 WebKit/Blink 内核的硬性限制，不是写法问题。
那怎么实现“看起来平滑”的滚动条样式过渡？
只能靠间接手段模拟：监听滚动状态或 hover 行为，用 class 切换 + 原生可过渡属性组合。关键点在于避开不可动画的 scrollbar 伪类，转而控制容器本身：
- 给滚动容器（如
<div class="scroller">）设置 <code>overflow-y: auto，并用opacity、transform或background模拟“滚动条出现/隐藏”的视觉反馈 - 用 JavaScript 监听
scroll或mouseenter/mouseleave，动态添加is-scrolled或is-hovered类 - 在该类下，通过
::-webkit-scrollbar-thumb改变颜色或圆角，同时用transition控制容器内其他元素（比如遮罩层、边框）的动画，制造“连带过渡”感
例如：
.scroller {
transition: border-color 0.2s ease;
}
.scroller.is-hovered {
border-color: #6366f1;
}
.scroller::-webkit-scrollbar-thumb {
background: #6366f1; /* 这个变化仍是瞬时的，但配合 border 动画，观感更连贯 */
}
跨浏览器兼容时最常踩的坑是什么？
开发者常误以为写全三端样式（scrollbar-width + scrollbar-color + ::-webkit-scrollbar）就能统一行为，结果发现 Firefox 下 hover 时颜色突变、Chrome 下滚动中 thumb 大小跳变。根本原因是：三套机制彼此隔离，且都不可过渡。更麻烦的是，scrollbar-color: auto 在 Firefox 中会退回到系统默认样式，而 WebKit 下无法用伪元素还原该效果，导致视觉断层。
立即学习“前端免费学习笔记（深入）”；
真正可控的只有你加在容器上的 class 和它能驱动的原生可动画属性——别试图让滚动条自己动起来，让它“旁边的东西动”，才是实际可行的路径。
