使用linear-gradient与-webkit-mask-image做CSS文本动画后如何保持全显

要实现动画结束后保持文本完全显示的状态，核心修改点是给动画配置animation-fill-mode: forwards属性。

具体操作 #

在你绑定渐显动画的元素CSS规则中，修改动画声明，追加forwards参数即可：

/* 原代码示例（你原本的写法） */
.target-text {
  animation: textReveal 2s;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
  -webkit-mask-size: 400% 100%;
}

@keyframes textReveal {
  0% {
    -webkit-mask-position: 100% 0;
  }
  100% {
    -webkit-mask-position: 0 0;
  }
}

/* 修改后的代码 */
.target-text {
  /* 追加forwards，指定动画结束后停留在最后一帧 */
  animation: textReveal 2s forwards;
  /* 其余原有属性保持不变 */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
  -webkit-mask-size: 400% 100%;
}

原理说明 #

• CSS动画默认执行完毕后会重置到元素初始样式，这就是动画结束后文本无法保持显示的原因
• animation-fill-mode: forwards的作用就是让动画执行完成后，永久保留最后一帧的样式状态，你的动画最后一帧正好是渐变完全覆盖文本的全显状态，因此设置后就会一直保持文本可见。

兼容提示 #

如果需要适配老旧webkit内核浏览器，可以补充前缀写法：

.target-text {
  -webkit-animation: textReveal 2s forwards;
  animation: textReveal 2s forwards;
}

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