Design

Como criar transição (fade) com CSS no carregamento da página e imagens

Google+ Pinterest LinkedIn Tumblr
Anúncios Google

Quem aí trabalhava ou brincava com design web na primeira metade dos anos 2000? Lembram como era feito pra conseguir um botão ou imagem com efeito de transição, tipo ir aparecendo aos poucos, ou mudando de cor?

Normalmente eram duas abordagens: uma com Javascript e a outra – mais fácil e menos indicada – era apelar pro Flash. Mais recentemente surgiram vários meios de fazer isso com jQuery.

Mas felizmente, com a modernização dos navegadores, mais recursos e propriedades de CSS vão se tornando compatíveis num ambiente mais amplo, e dá pra conseguir quase tudo só com CSS.

Vamos ver dois exemplos da regra keyframes (quadros-chave) pra criar animações simples, completas pela propriedade animation. Com opacity vamos “esconder” os elementos durante o carregamento, aparecendo aos poucos.

Fade no carregamento da página

Primeiro, os estilos que vão fazer a página toda ter efeito de transição ao carregar. Eu testei aqui e esse método funciona em todos os navegadores em suas versões mais atuais, incluindo o Internet Explorer 10. Não testei em dispositivos móveis.

Vamos começar com os quadros de animação, os keyframes. Abra sua folha de estilos e cole:

@-webkit-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; } 
}
@-moz-keyframes fadeIn {
0% { opacity: 0;}
100% { opacity: 1; }
}
@-o-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}

Está bem fácil até aí: nos elementos fadeIn, o keyframe em 0% (início) tem opacidade 0, e no final, opacidade total (1).

Então, uma classe fadeIn com as animações e seus tempos:

.fadeIn {
-webkit-animation: fadeIn 3s ease-in-out;
-moz-animation: fadeIn 3s ease-in-out;
-o-animation: fadeIn 3s ease-in-out;
animation: fadeIn 3s ease-in-out;
}

Com isso, vamos usar o tempo de transição de 3 segundos, com o tempo ease-in-out (começa e termina mais lento, com uma aceleração na parte central). Veja todos os tempos de transição aqui.

Agora é só incluir uma classe “fadeIn” no objeto que será animado; no caso, a página toda, então aplique-a na marcação “body”. Abra o header do seu template (considerando que sempre falamos aqui do WordPress) e edite:

<body>

…deve ficar:

<body class="fadeIn">

Envie tudo para o servidor, esvazie caches, teste. Você deve conseguir o mesmo visto no exemplo 1.

Fade no carregamento de imagens

Podemos criar animações assim em objetos isolados também, inclusive na mesma página que já leva o transition na body. Partindo do mesmo exemplo anterior, acrescente aos estilos:

.fadeImg {
opacity:0;
-webkit-animation: fadeIn 5s ease-in-out;
-moz-animation: fadeIn 5s ease-in-out;
-o-animation: fadeIn 5s ease-in-out;
animation: fadeIn 5s ease-in-out; 
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
-o-animation-fill-mode:forwards;
animation-fill-mode:forwards;}

.fadeImg-delay {	
-webkit-animation-delay:3s;
-moz-animation-delay:3s;
-o-animation-delay:3s;
animation-delay:3s;}

.fadeImg2 {
opacity:0;
-webkit-animation: fadeIn 500ms linear;
-moz-animation: fadeIn 500ms linear;
-o-animation: fadeIn 500ms linear;
animation: fadeIn 500ms linear; 
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
-o-animation-fill-mode:forwards;
animation-fill-mode:forwards;}

.fadeImg2-delay {	
-webkit-animation-delay:6s;
-moz-animation-delay:6s;
-o-animation-delay:6s;
animation-delay:6s;}

Vou usar essas novas classes fadeImg e fadeImg2 para duas imagens com diferentes efeitos.

Em fadeImg, tem uso da propriedade animation com propriedades agrupadas:

  • fadeIn é o valor da propriedade animation-name, que está apontando para aquela que criamos antes. Então a animação do fadeImg vai usar o mesmo tipo de quadros da animação principal (ou seja, começando com opacidade zero e terminando em 1).
  • 5s é o valor de animation-duration (sim, cinco segundos do começo ao fim da transição).
  • ease-in-out é o valor de animation-timing-function. Siga aquele link que passei antes para ver outros valores.

Usamos também o animation-fill-mode, que indica quando os estilos serão aplicados ao elementos, com o valor forwards. Assim, o valor estabelecido no final da animação (quando a opacidade que era 0 já passou a ser 1) é mantido. Caso contrário, o opacity 0 usado para esconder a imagem no início é reaplicado no final da “linha do tempo” da animação.

Depois, uma classe para um “extra”: um atraso para começar a animação, usando animation-delay de 3 segundos. Ou seja, a página carrega, e três segundos depois entra a animação de quem levar a classe.

Em fadeImg2, repeti tudo com outros valores, só como exemplo. Veja que usei outro tempo (500ms, ou milissegundos, lembrando que 1000 = 1 segundo), animação linear (sem variação na velocidade) e atraso de 6 segundos.

Extra: animação contínua

No terceiro exemplo, alguns “enfeites”: numa das imagens adicionamos as propriedades animation-direction marcado em alternate, para que a animação chegue ao ponto final e corra de novo ao contrário. E com um animation-iteration-count em infinite, ela corre indefinidas vezes.

Resumindo: acrescente nos mesmos estilos do fadeImg2 anteriores:

-webkit-animation-direction:alternate;
animation-iteration-count:infinite;
animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;

Feito.

Anúncios Google

Fundador do Tutoriart em 2010, é ex-instrutor de Photoshop, design web e gráfico. Em quase uma década de redação online, tem cerca de 1500 artigos publicados. Gerencia também o Memória BIT.

14 Comentários

  1. Gabriele Fernandes Responder

    Muiiiiito bom e simples! Não vou mais ter que correr para o Java Script ou JQuery para fazer esse efeito. 😉

  2. Daniel,
    Beleza de código.
    Gostaria de adaptar ao seu código, uma transposição de imagens, onde o link das imagens ficariam armazenadas num vetor javascript, e ao ir clicando num next ou previus carregaria outra imagem e o efeito de transicao(fade) ocorreria em toda a pagina.
    Olhe o exemplo em http://vicmeirelles.com.br/
    Por favor, poderia me dar uma dica ?
    Obrigado

  3. Daniel,

    Informação adicional: estou usando este efeito em um site em wordpress.

    Vi que o seu exemplo funciona perfeitamente no Mozilla. Será que é alguma incompatibilidade entre o “código + wordpress + firefox”?

  4. Olá Daniel,

    Parabéns pela dica técnica, muito show!

    Estou aplicando este efeito em um site (do exemplo 1), porém não está funcionando no Mozilla Firefox (V. 26.0). Será que houve alguma atualização ou detalhe nesta “pequena programação” que deva ser alterado para funcionar?

    Dei uma revisada no código e está tudo certo. No Google Chrome ( v. 32.0.1700.76) e Internet Explorer (v.10) está tudo ok, funciona perfeitamente.

    Mais uma vez obrigado pela dica, e se puder me ajudar, lhe agradeço!
    Roger

    • Obrigado Roger!
      Estranho, testei aqui no Firefox e funcionou numa boa. Talvez seja alguma configuração local aí, que não está deixando carregar os estilos.

  5. Parabéns Daniel!!! Depois de muito procurar, finalmente acabei encontrando a solução para meu projeto!!!! Excelente!!!

    Teria a possibilidade de postar um código com um efeito de transição!!!!

    Grande abraço….

Deixe um Comentário

Pin