I am not sure the best title to describe my problem but i would like to have the effect to reveal the text on my page. I follow the example online pure-css-wiping-gradient-text-reveal by using animation linear-gradient and -webkit-mask-image. it seems fine but is there any way for me to keep all text to be reveal after animation finish?

codesandbox

CodePudding user response：

There are a couple of things you need to do.

First of all you don't want the animation to carry on iterating, going back to text being invisible then wiped to show itself then invisible again so stop it doing an infinite number of iterations and go to just one.

Second you want at the end of the animation that the text remains visible, ie you don't want to revert to the initial state, so set animation-fill-mode to forwards, this will keep the end state.

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