Fade no carregamento da página

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

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

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">

—————————————————————————-
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.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *