这个Chrome的blur(0)渲染bug我太熟了！之前做文字动效的时候踩过一模一样的坑——Firefox和Opera处理得很顺滑，但Chrome会在动画结束时突然闪一下，本质是浏览器对“无滤镜状态”的重绘逻辑出了问题：当动画从blur(3px)切换到blur(0px)时，Chrome会把元素从「应用滤镜的独立渲染层」切回「普通渲染层」，这个切换过程触发了不必要的重绘，就出现了闪烁。

下面给你几个亲测有效的修复方法：

方法1：用极小模糊值替代blur(0) #

把动画结束帧的blur(0px)改成blur(0.001px)，这样Chrome会认为滤镜依然处于激活状态，不会触发渲染层切换，完美避开闪烁问题：

function fadeIn(quoteSpans) {
  let delay = 0; // 记得初始化delay变量，原代码里可能漏了这一步
  Array.prototype.forEach.call(quoteSpans, function(word) {
    let animate = word.animate(
      [
        { opacity: 0, filter: "blur(3px)" },
        { opacity: 1, filter: "blur(0.001px)" } // 替换0为极小数值
      ],
      { duration: 1000, delay: delay, fill: 'forwards' }
    );
    delay = delay + 300;
  })
}

方法2：强制硬件加速避免重绘 #

给动画的前后帧都加上transform: translateZ(0)，触发Chrome的硬件加速，让元素始终保持在独立渲染层，消除层切换带来的闪烁：

function fadeIn(quoteSpans) {
  let delay = 0;
  Array.prototype.forEach.call(quoteSpans, function(word) {
    let animate = word.animate(
      [
        { opacity: 0, filter: "blur(3px)", transform: "translateZ(0)" },
        { opacity: 1, filter: "blur(0px)", transform: "translateZ(0)" }
      ],
      { duration: 1000, delay: delay, fill: 'forwards' }
    );
    delay = delay + 300;
  })
}

方法3：改用CSS关键帧动画（更稳定） #

有时候JS的animate()API在Chrome里的渲染优先级不如CSS动画，改用CSS关键帧定义动画，再通过JS添加类触发，稳定性会更好：

首先定义CSS：

@keyframes fadeInBlur {
  from {
    opacity: 0;
    filter: blur(3px);
  }
  to {
    opacity: 1;
    filter: blur(0.001px); /* 同样用极小模糊值 */
  }
}

.fade-in-blur {
  animation: fadeInBlur 1s forwards;
}

然后修改JS代码：

function fadeIn(quoteSpans) {
  let delay = 0;
  Array.prototype.forEach.call(quoteSpans, function(word) {
    word.style.animationDelay = `${delay}ms`;
    word.classList.add('fade-in-blur');
    delay += 300;
  });
}

这三个方法都能解决你的问题，个人更推荐方法1或者方法3，代码改动小且兼容性更好。

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