CSS文字线性渐变动画异常：渐变仅在动画结束后显示，如何修复？

问题核心：给文字设置线性渐变和逐字母动画后，动画运行时渐变消失，仅在动画完成后显示。

原因 #

对使用background-clip: text的元素应用transform动画时，部分浏览器的硬件加速优化会干扰渐变文本的渲染，导致动画过程中渐变无法正常显示。

解决方案 #

给<li>元素添加以下任意一个CSS属性，即可强制浏览器在动画全程正确渲染渐变：

• transform-style: preserve-3d
• backface-visibility: hidden
• perspective: 1000px

修改后的完整代码 #

CSS #

ul {
    list-style: none;
    display: flex;
    cursor: default;
    justify-content: center;
    transition: 5s;
    align-items: center;
    position: relative;
    z-index: 1;
    top: 35vh;
    left: -4%;
}

li {
    font-size: 12vw;
    font-weight: bolder;
    margin: .1em;
    position: relative;
    background: -webkit-linear-gradient(green, yellow);
    background: linear-gradient(green, yellow);
    background-clip: text;
    color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px rgb(76, 70, 245);
    /* 添加以下属性解决渲染问题 */
    transform-style: preserve-3d;
}

li::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    text-shadow: .02rem -.02rem .1rem gray,
        .05rem -.05rem .1rem gray,
        .08rem -.08rem .1rem gray,
        .11rem -.11rem .1rem gray,
        .14rem -.14rem .1rem gray,
        .17rem -.17rem .1rem gray,
        .20rem -.20rem .1rem gray,
        .23rem -.23rem .1rem gray,
        .26rem -.26rem .1rem gray,
        .29rem -.29rem .1rem gray,
        .32rem -.32rem .1rem gray,
        .3rem .2rem .5rem gray;

}

@keyframes year {
    50% {
        transform: translateX(-5vw) translateY(-35vw) rotate(-180deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}

li:nth-child(1) {
    animation: year 2s linear;
}

li:nth-child(2) {
    animation: year 2s linear;
    animation-delay: 1s;
}

li:nth-child(3) {
    animation: year 2s linear;
    animation-delay: 2s;
}

li:nth-child(4) {
    animation: year 2s linear;
    animation-delay: 3s;
}

HTML #

<div class="year">
    <ul>
        <li data-text="2">2</li>
        <li data-text="0">0</li>
        <li data-text="2">2</li>
        <li data-text="2">2</li>
    </ul>
</div>

说明 #

添加transform-style: preserve-3d可以维持元素的3D渲染上下文，避免浏览器在动画时对渐变文本的渲染做异常优化，确保渐变在动画全程正常显示。如果这个属性无效，可以尝试替换为backface-visibility: hidden或perspective: 1000px，不同浏览器对这些属性的兼容性表现略有差异。

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