Usando CSS para criar efeito fade-in no carregamento de páginas
Usar animações em CSS na abertura de páginas ajuda a suavizar as transições e pode melhorar a experiência do usuário.
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.