能否为滚动条滑块（scrollbar thumb）添加keyframes关键帧动画？

问题原因 #

• Webkit内核的滚动条伪元素（::-webkit-scrollbar系列）不属于标准DOM节点，浏览器默认不会对这类伪元素应用animation动画属性，属于浏览器本身的实现限制，和你的代码语法无关。
• 另外你没有声明::-webkit-scrollbar的基础宽高，部分浏览器会直接忽略未声明宽高的滚动条自定义样式，这也是可能导致样式不生效的原因。

可行实现方案 #

方案1：纯CSS实现（无需JS，完全符合你的需求） #

利用浏览器会对根元素的CSS变量动画触发全局重绘的特性，把滚动条的样式参数绑定到CSS变量上，给根元素加动画即可间接驱动滚动条样式变化：

/* 必须先声明滚动条基础宽高，否则自定义样式不生效 */
body::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
/* 滚动条轨道样式可按需自定义 */
body::-webkit-scrollbar-track {
  background: #f1f1f1;
}
/* 滚动条滑块颜色绑定CSS变量 */
body::-webkit-scrollbar-thumb {
  background: var(--scrollbar-color, #196bd7);
  border-radius: 10px;
}
/* 给根元素加CSS变量动画，间接触发滑块颜色变化 */
:root {
  animation: scrollbar1 5s infinite;
}
@keyframes scrollbar1 {
  0%{ --scrollbar-color: blue; }
  25%{ --scrollbar-color: red; }
  100%{ --scrollbar-color: chartreuse; }
}

该方案兼容所有支持Webkit滚动条自定义的浏览器，仅靠CSS即可实现你要的无限轮播颜色效果。

方案2：JS辅助实现（适合更复杂的交互动画） #

如果需要实现随滚动进度变化的滚动条动画，可以配合JS动态修改CSS变量完成：

const root = document.documentElement
window.addEventListener('scroll', () => {
  const scrollRate = window.scrollY / (root.scrollHeight - window.innerHeight)
  // 可按需自定义不同滚动进度对应的滚动条样式
  root.style.setProperty('--scrollbar-color', `hsl(${scrollRate * 120}, 80%, 50%)`)
})

内容的提问来源于stack exchange，提问作者g97