如何为::selection选择器实现过渡式背景色动画？

不能直接为::selection伪元素应用CSS过渡或动画来实现背景色平滑变化——因为浏览器对::selection支持的CSS属性非常有限，仅包括color、background、cursor、outline，动画/过渡属性不在允许范围内，所以你直接写在h1::selection上的animation规则不会生效。

可行的解决方案：通过CSS变量间接实现平滑过渡 #

可以把颜色动画应用到根元素的CSS变量上，让::selection继承这个变量的值。由于CSS变量的颜色变化会自动插值，就能实现选中文本背景色的平滑过渡效果：

:root {
  --color: #b8d6b7;
  --clr1: pink;
  --clr2: red;
  --clr3: orange;
  --clr4: yellow;
  --clr5: green;
  --clr6: blue;
  --clr7: indigo;
  /* 把动画应用到根元素，控制CSS变量的变化 */
  animation: transitionanim 1.5s infinite linear;
}

h1::selection {
  background: var(--color);
}

p::selection {
  background-color: yellow;
}

@keyframes transitionanim {
  0% { --color: var(--clr1); }
  16% { --color: var(--clr2); }
  33% { --color: var(--clr3); }
  50% { --color: var(--clr4); }
  66% { --color: var(--clr5); }
  83% { --color: var(--clr6); }
  100% { --color: var(--clr7); }
}

原理说明 #

• ::selection虽然不能直接用动画，但它可以正常使用CSS变量作为background的值。
• 根元素的animation会控制--color变量在不同颜色值之间平滑过渡（浏览器会自动处理颜色插值），::selection的背景色会同步这个变量的变化，从而实现平滑的颜色动画效果。

替代方案：JS结合颜色渐变算法 #

如果你需要更灵活的控制（比如仅在选中时触发动画），可以用JS计算颜色渐变的中间值，通过requestAnimationFrame实时更新CSS变量，实现平滑过渡。不过相比之下，纯CSS方案更简洁高效。

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