Efeito fade em textos

Nesse post vou tentar explicar como é feito o efeito apresentado abaixo.

Essa técnica de revelar um texto com um efeito de fade in e fade out pode ser atingida com poucas ferramentas do css moderno, como o background-imagebackground-image e background-clipbackground-clip.

Basicamente em volta do nosso texto vamos ter uma divdiv com as propriedades background-imagebackground-image com um radial-gradient()radial-gradient() que a última cor precisa ser transparente e um background-clip: 'text'background-clip: 'text' que irá usar o texto como máscara.

Já no nosso texto, devemos aplicar um color: transparentcolor: transparent para que o texto não apareça na tela, e que sirva apenas de máscara para o gradiente preenché-lo com suas cores.

Dessa forma ao animarmos o eixo yy do radial-gradient()radial-gradient() ele irá percorrer o texto revelando a máscara, usando as cores do radial-gradient()radial-gradient().