为带Anime.js动画的h1文本应用渐变颜色时颜色不显示

渐变文本不可见是样式作用层级和层叠上下文共同导致的：

• 渐变背景、文字裁剪、透明填充色的样式写在h1父元素上时，无法作用到内部的字符span上。代码中已经把所有非空字符拆分到了<span class="letter">内，这些span被设置为inline-block，加上Anime.js执行缩放、位移动画时会给span添加transform属性，触发独立层叠上下文，父元素的background-clip: text裁剪效果完全无法穿透到子层的文本内容。
• h1上设置的-webkit-text-fill-color: transparent会被子元素继承，但是span本身没有配置渐变背景，最终文本就变成全透明状态，肉眼完全看不到。
• 附带的无效代码：动画中给.ml2设置的opacity: 100不符合CSS规范，opacity属性的合法取值范围是0-1，100属于无效值不会生效。

将渐变文本相关的样式从h1选择器迁移到实际承载文本的.ml2 .letter选择器上，同时修正opacity的错误取值即可，动画和渐变效果可以同时正常运行。

修正后代码 #

JavaScript #

var textWrapper = document.querySelector('.ml2 .letter');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

anime.timeline({loop: true})
  .add({
    targets: '.ml2 .letter',
    scale: [4,1],
    opacity: [0,1],
    translateZ: 0,
    easing: "easeOutExpo",
    duration: 950,
    delay: (el, i) => 70*i
  }).add({
    targets: '.ml2',
    opacity: 1,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
  });

CSS #

body {
  display:flex;
  justify-content:center;
  align-items: center;
  height: 100vh;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  background: linear-gradient(to right, #FDFBFB, #EBEDEE 70%);
}
.ml2 {
  font-weight: 900;
  font-size: 3.5em;
}

.ml2 .letter {
  display: inline-block;
  line-height: 1em;
  /* 渐变文本样式直接加在承载文本的span上 */
  background: linear-gradient(to right, #30CFD0 0%, #330867 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

HTML #

<body>  
  <h1 class="ml2"><span class="letter"> Hello World!</span></h1>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
</body>

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