Executando verificação de segurança...
8

Efeito de "fade-in" em CSS (versão sofisticada)

Ao invés de utilizar um efeito padrão de fadein, encontrei nesse tweet uma versão mais sofisticada e muito simples de ser implementada usando somente CSS.

Na animação abaixo, veja na esquerda o efeito padrão de fade-in, e na direita o novo efeito, que também traz o efeito de "fade", mas de uma forma levemente mais reveladora:

Efeito fadein implementado apenas usando CSS

Código CSS utilizado

{
  0% {
    mask: linear-gradient(90deg, #000 25%, #000000e6 50%, #00000000) 150% 0 / 400% no-repeat;
    opacity: .2;
  }
  100% {
    mask: linear-gradient(90deg, #000 25%, #000000e6 50%, #00000000) 0 / 400% no-repeat;
    opacity: 1;
  }
}
Carregando publicação patrocinada...