Imagem mostra metade com símbolo do CSS3 e, na outra metade, símbolo do HTML5
Freepik/Reprodução

Atualizado em

O efeito de fade-in é uma técnica muito utilizada para dar um toque de elegância às páginas web, permitindo uma transição suave e gradual do fundo para o conteúdo principal. Embora a maioria dos desenvolvedores utilize JavaScript para criar esse efeito, é possível fazê-lo apenas com CSS, o que torna o processo mais simples e leve. Neste artigo, vou mostrar como criar um efeito fade-in no carregamento de uma página inteira usando apenas CSS.

Para criar a animação, basta copiar e colar o código abaixo em seu arquivo CSS (no WordPress, geralmente chamado de styles.css, localizado no diretório principal do tema instalado). Com esse código, sua página terá uma transição suave de 30% para 100% de opacidade durante o carregamento, com duração de 2 segundos.

body {
    animation: fadeInAnimation ease 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
 
@keyframes fadeInAnimation {
    0% {
        opacity: 0.3;
    }
    100% {
        opacity: 1;
     }
}

Outro método é usar a propriedade de transição para para ajustar a opacidade enquanto o elemento body está sendo carregado, mas ele pode ser incompatível com alguns navegadores. Teste durante o desenvolvimento:

body {
	opacity: 0;
	transition: opacity 5s;
}

Com esses passos simples, é possível criar um efeito fade-in elegante e suave para a sua página usando apenas CSS. Além de ser mais leve do que usar JavaScript, essa técnica também é mais simples e fácil de implementar.

Lembre-se de que as animações podem demandar bastante processamento gráfico, mesmo quando suportadas pelos navegadores, podendo causar lentidão ou travamentos no carregamento da página. Por isso, é importante usá-las com moderação e bom senso.