在 100% 动画时显示 css

Question

我不确定描述我的问题的最佳标题，但我希望能够在我的页面上显示文本。我通过使用动画 linear-gradient 和 -webkit-mask-image 在线遵循示例 pure-css-wiping-gradient-text-reveal。看起来不错，但是我有什么办法可以让所有文本在动画完成后显示出来吗？

codesandbox

Answer 1

您需要做几件事。

首先，您不希望动画继续迭代，回到文本不可见然后擦除以显示自身然后再次不可见，因此停止它进行无限次迭代并转到一次。

其次你希望在动画结束时文本仍然可见，即你不想恢复到初始状态，所以将animation-fill-mode设置为forwards，这将保持结束状态。

.animation-text-wipe.animate-in {
    animation-name: text-wipe;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

在 100% 动画时显示 css

display css at 100% of animation

html

css

css-animations