Animações CSS3 de carregamento de página suaves e sensuais

também conhecido como atrasando uma animação CSS3

Sempre fiquei impressionado com algumas das animações sutis vistas nas páginas de produtos da apple.com. Geralmente começa com uma animação que é reproduzida no carregamento da página, onde um elemento é introduzido na página por slide / fade in. É tão sutil, mas tão satisfatório para o usuário.

Este efeito elegante e sutil está sendo usado no site recém-redesenhado do Livefyre. ( http://livefyre.com )

Recentemente, descobri alguns problemas em adicionar aquele toque simples de animação sem ficar instável e, assim, quebrar essa experiência elegante.

O problema de ter uma animação reproduzida quando uma página é carregada é que muitos recursos, incluindo imagens e scripts que manipulam o DOM, fazem com que o navegador seja redesenhado / retransmitido. Isso contesta os recursos do navegador ao tentar reproduzir a animação, causando quadros perdidos.

Uma solução alternativa para isso é atrasar o início da animação para permitir que a página seja desenhada antes de reproduzir a animação.

Freqüentemente, ao introduzir / mostrar um elemento na página, o elemento fica oculto (opacidade: 0) e, com o tempo, ganha opacidade total.

Embora exista o parâmetro ‘atraso’ para o atributo de animação, especificar um tempo para este parâmetro exibirá o elemento em seu quadro final para a duração do atraso especificado. Em seguida, ele ocultará o elemento e será animado em total opacidade. Este é um efeito indesejado. Não queremos ver o último quadro-chave durante o período de atraso.

Para evitar ver o elemento durante o período de atraso, siga estas etapas:

1) Crie uma div em nosso html que queremos animar
2) Crie quadros-chave em nosso arquivo css (basicamente definirão como as coisas mudam, neste caso de opacidade 0 para opacidade 100)

@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

3) Criar tag div em nosso css, definir nossa animação (duração, atraso de início etc) e vinculá-la aos nossos quadros-chave

.fade-in {
    opacity:0;  /* make things invisible upon start */
    animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */

    animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/

    animation-duration:1s;
    animation-delay: 1.5s
}

A chave é usar:

animation-fill-mode:forwards

Em conjunção com :

opacity: 0

Isso oculta o elemento (opacidade: 0) que desejamos animar para o atraso especificado e força a animação a parar no último quadro-chave (opacidade: 1).

Aqui está uma lista detalhada: http://www.graphicfusiondesign.com/blog/design/creating-fancy-css3-fade-in-animations-on-page-load/