如何正确使用CSS @keyframes和animation实现下拉框并解决滚动异常

原生<select>元素添加无限循环的border-color动画后，浏览器会每帧触发元素重绘，当下拉列表展开并拖动滚动条时，频繁的重绘会干扰鼠标事件的响应，导致滚动条无法跟随鼠标正常滑动。

方案1：暂停展开时的动画 #

通过CSS伪类检测<select>的激活状态，展开时暂停动画，滚动操作完成后自动恢复：

@keyframes blink {
  50% {
    border-color: #fff;
  }
}

.blink {
  border: 3px solid #0061a0;
  font-weight: bolder;
  animation: blink 1s infinite;
}

/* 当select展开时暂停动画 */
.blink:focus-within,
.blink:active {
  animation-play-state: paused;
}

方案2：优化动画性能 #

添加will-change属性提示浏览器提前优化动画渲染，减少重绘对交互的影响：

@keyframes blink {
  50% {
    border-color: #fff;
  }
}

.blink {
  border: 3px solid #0061a0;
  font-weight: bolder;
  animation: blink 1s infinite;
  will-change: border-color; /* 告知浏览器预优化该属性的动画 */
}

方案3：替换低开销的动画属性 #

改用outline替代border执行动画，outline不属于盒模型，动画重绘开销更低，能避免干扰滚动交互：

@keyframes blink {
  50% {
    outline-color: #fff;
  }
}

.blink {
  border: 3px solid #0061a0;
  font-weight: bolder;
  outline: 3px solid #0061a0; /* 添加outline作为动画载体 */
  animation: blink 1s infinite;
}

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