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:
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;
}
}