仅Chromium浏览器中CSS background-clip阻碍opacity过渡的问题排查

问题根源 #

当元素同时使用-webkit-background-clip: text和-webkit-text-fill-color: transparent实现渐变文字效果时，Chromium内核浏览器会忽略对opacity属性的过渡动画，这是浏览器渲染层的兼容性差异导致的，Firefox则不存在此限制。

修复方案（纯CSS，无需修改JS） #

方案1：添加filter属性过渡 #

通过同时对opacity和filter: opacity()设置过渡，强制Chromium触发渲染层动画：

.hidden {
  opacity: 0;
  filter: opacity(0);
  /* 同时指定两个属性的过渡 */
  transition: opacity .8s ease-in, filter .8s ease-in;
}

.show {
  opacity: 1;
  filter: opacity(1);
}

方案2：结合visibility属性过渡 #

利用visibility的可见性切换配合opacity过渡，确保Chromium识别动画：

.hidden {
  opacity: 0;
  visibility: hidden;
  /* visibility的过渡延迟与opacity时长一致，避免闪烁 */
  transition: opacity .8s ease-in, visibility 0s ease-in .8s;
}

.show {
  opacity: 1;
  visibility: visible;
  transition: opacity .8s ease-in, visibility 0s ease-in 0s;
}

替代实现（最少JS） #

如果上述CSS方案仍不生效，可以改用CSS关键帧动画替代JS的class切换，仅保留极少量JS用于初始化：

CSS 修改 #

@keyframes fadeToggle {
  0%, 49% { opacity: 0; }
  50%, 100% { opacity: 1; }
}

/* 直接给元素添加循环动画 */
#interests div {
  opacity: 0;
  animation: fadeToggle 2s infinite;
}

JS 修改（简化版） #

// 仅需确保元素初始状态正确，无需setInterval
document.querySelectorAll('#interests div').forEach(el => {
  el.classList.remove('hidden');
});

原代码修改后的完整示例 #

<div class="d-flex">
  <div class="arsenal-sc-regular" id="interests">
    <div><span id="lifestyle">lifestyle</span></div>
    <div><span id="modelling">modelling</span></div>
    <div><span id="travelling">travelling</span></div>
    <div><span id="fashion">fashion</span></div>
  </div>
</div>

#interests {
  background-image: var(--gr3-flipped) !important;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 使用方案1的CSS */
#interests div {
  opacity: 0;
  filter: opacity(0);
  transition: opacity .8s ease-in, filter .8s ease-in;
}

#interests div.show {
  opacity: 1;
  filter: opacity(1);
}

body {
  background: #000;
  color: var(--light-blue);
  display: flex;
}

#fashion,
#lifestyle,
#modelling,
#travelling {
  display: block;
}

.arsenal-sc-regular {
  font-family: "Arsenal SC", sans-serif;
  font-weight: 400;
  font-style: normal;
}

#lifestyle {
  font-size: var(--lifestyle-fs);
  line-height: .3;
}

#modelling {
  font-size: calc(var(--lifestyle-fs) * .822);
  line-height: 1;
}

#travelling {
  font-size: calc(var(--lifestyle-fs) * .821);
  line-height: .3;
}

#fashion {
  font-size: calc(var(--lifestyle-fs) * 1.1275);
  line-height: .8;
}

:root {
  --light-red: hsl(343, 30%, 52%);
  --light-blue: hsl(195, 18%, 55%);
  --gr3-flipped: linear-gradient(225deg, var(--light-blue) 0%, var(--light-blue) 27%, var(--light-red) 100%);
  --lifestyle-fs: clamp(6rem, 24vw, 12rem);
}

.d-flex {
  display: flex !important;
}

setInterval(function() {
  document.querySelectorAll('#interests div').forEach(function(element) {
    element.classList.toggle('show');
  });
}, 1000);

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