CSS文本动画在火狐浏览器不生效 已配置-moz-background-clip求助

问题原因 #

Firefox 从未实现 -moz-text-fill-color 这个私有属性，同时高版本 Firefox 已经支持标准的 background-clip: text 配置，不需要额外加 -moz- 前缀。你当前的代码仅用 WebKit 内核专属的 -webkit-text-fill-color 实现文本透明，火狐下不生效，自然看不到背景裁剪到文本的效果。

修复后的代码 #

CSS 部分

.my-name {
    text-align: center;
    text-transform: uppercase;
    font-size: 2em;
    letter-spacing: 4px;
    overflow: hidden;
    background: linear-gradient(90deg, white, white, white, rgb(29, 29, 29));
    background-repeat: round;
    background-size: 80%;
    animation: animate-my-name 5s linear infinite;
    /* 兼容webkit内核旧版本 */
    -webkit-background-clip: text; 
    /* 标准属性放最后，Firefox直接支持 */
    background-clip: text;
    /* 标准透明文本配置，兼容所有支持background-clip:text的浏览器 */
    color: transparent;
    /* 保留webkit私有属性兼容旧版webkit内核浏览器 */
    -webkit-text-fill-color: transparent;
}
@keyframes animate-my-name {
    0% {
        background-position: -500%;
    }
    100% {
        background-position: 500%;
    }
}

HTML 部分无需修改

<h1 class="my-name">HELLO WORLD</h1>

补充说明 #

如果你的页面背景是浅色，需要调整渐变的颜色取值，否则透明文本透出的渐变和背景混在一起会看不到效果。

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