使用Element.animate()修改background-color无效，如何修复？

你的代码核心问题是只定义了单个关键帧，浏览器无法明确background-color的动画过渡逻辑（而color可能刚好因为元素初始值与目标值有差异，被浏览器默认处理）。要实现闪烁刷新效果，需要明确动画的起始、目标和结束状态。

修复方案 #

1. 定义完整的关键帧序列：包含元素初始样式、闪烁样式、回到初始样式三个阶段
2. 通过getComputedStyle获取元素当前的实际样式，确保动画从元素现有状态平滑过渡

修改后的代码：

const blinkOnPage = (id) => {
  const element = document.getElementById(id);
  const computedStyle = getComputedStyle(element);
  
  element.animate(
    [
      // 起始状态：元素当前的样式
      { backgroundColor: computedStyle.backgroundColor, color: computedStyle.color },
      // 闪烁状态：目标高亮样式
      { backgroundColor: '#def', color: '#def' },
      // 结束状态：回到元素初始样式
      { backgroundColor: computedStyle.backgroundColor, color: computedStyle.color }
    ], {
      easing: 'ease-in-out',
      duration: 400, // 调整时长让闪烁更自然
      iterations: 1 // 仅执行一次闪烁，可按需修改
    });
}

额外注意事项 #

• 如果元素的background-color被CSS的!important修饰，Web Animations API的动画优先级会低于该规则，此时需要移除!important或改用CSS动画实现
• 若不需要回到初始样式，可删除第三个关键帧并将fill属性设置为forwards，让动画结束后保持目标样式

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