使用background-clip:text时，span字母淡入淡出动画失效求助

问题背景 #

我将<h1>标题的每个字母用<span>包裹，代码如下：

<h1 class='gradient-heading' id='fade'>
  <span>H</span>
  <span>e</span>
  <span>l</span>
  <span>l</span>
  <span>o</span>
</h1>

为实现渐变文字效果，使用了background-clip: text并将文字设为透明，CSS代码：

.gradient-heading {
  background: linear-gradient(90deg, rgba(239,255,0,1) 0%, rgba(255,182,0,1) 48%, rgba(199,0,255,1) 100%);
  background-clip: text;
  color: transparent;
}

同时通过JavaScript实现每个<span>字母的依次淡入淡出循环动画，但动画未正常工作，字母直接闪烁而非平滑过渡，疑似和background-clip: text属性有关。JavaScript代码：

function fadeLetters() {
  const heading = document.getElementById('fade');
  const spans = heading.querySelectorAll('span');

  let delay = 0;
  let delayIncrement = 200;
  let numLettersFadedIn = 0;
  const totalLetters = spans.length;

  spans.forEach((span, index) => {
    setTimeout(() => {
      span.style.transition = 'opacity 1s ease-in-out';
      span.style.opacity = 1;
      numLettersFadedIn++;

      if (numLettersFadedIn === totalLetters) {
        setTimeout(() => {
          spans.forEach((span, index) => {
            setTimeout(() => {
              span.style.transition = 'opacity 1s ease-in-out';
              span.style.opacity = 0;
            }, index * delayIncrement);
          });
          setTimeout(() => {
            numLettersFadedIn = 0;
            fadeLetters();
          }, totalLetters * delayIncrement);
        }, delayIncrement);
      }
    }, delay);

    delay += delayIncrement;
  });
}

fadeLetters();

问题原因 #

background-clip: text是作用在父元素<h1>上的，<span>本身没有渐变背景，仅作为文字的容器。由于父元素设置了color: transparent，<span>内的文字是透明的，实际显示的渐变是父元素的背景透过<span>区域透出的。

当对<span>设置opacity过渡时，浏览器无法平滑计算“透过子元素显示父元素背景”这个过程的渲染变化，导致过渡失效，表现为字母直接闪烁。

解决方法 #

将渐变样式从父元素<h1>转移到每个<span>上，让每个字母容器自身拥有渐变背景和文字透明设置，这样opacity过渡就能被浏览器正确计算，实现平滑动画。

修改后的CSS代码：

.gradient-heading span {
  background: linear-gradient(90deg, rgba(239,255,0,1) 0%, rgba(255,182,0,1) 48%, rgba(199,0,255,1) 100%);
  background-clip: text;
  color: transparent;
  opacity: 0; /* 初始隐藏所有字母 */
}

JavaScript代码无需修改，因为动画逻辑本身是正确的，仅需确保<span>初始状态为透明即可。

修改后，每个<span>独立拥有渐变文字效果，opacity的过渡会平滑改变字母的可见度，不再出现闪烁问题。

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