5 exemplos de animação usando CSS3

As últimas propriedades do CSS3 abriram um leque infinito de novas opções tanto para web designers quanto para desenvolvedores. Agora é possível criar animações e interatividade somente com CSS, sem nem passar perto de Flash, Silverlight ou After Effects. (O que já é de grande valia para muita gente!).

Os cinco experimentos que você confere nesse post são uma demonstração dessa poderosa ferramenta. Vale lembrar que a maioria dessas animações só irá funcionar nas versões mais recentes dos navegadores (e alguns também só vão funcionar em navegadores específicos).

Tabela Periódica

Os elementos da tabela periódica foram um tópico popular para que designers mostrassem  as novas tecnologias da web. Esta, criada pelo web designer Ricardo Cabello, começa com os elementos animados se organizando pelo espaço em direção ao outro para formar uma mesa.

É possível rodá-los em três dimensões, arrastando com o mouse. Você também pode alternar entre ‘Table’, ‘Sphere’, ‘Helix’ e ‘Grid’ clicando nos botões na parte inferior da página.

Em sua página no Google+, Ricardo explica detalhes de sua criação. Para o caso de você não ter acesso a um navegador moderno, Cabello também postou este vídeo de como o demo roda em um iPad 2:

Botões animados

Sete elementos animados com estilos diferentes, hover e links ativos. A animação é muito boa, mas vale ficar atento ao comportamento dos usuários diante delas.

Hovers originais

Ao passar o mouse sobre as miniaturas de uma dessas 10 demos, a animação CSS revela mais informações.

Capas interativas

Não só @MrDenav e @lucasmarinm não só recriaram algumas capas de discos clássicos utilizando CSS puro, como também as fizeram reagir à música. As demonstrações  incluem First Impressions do The Strokes e Unknown Pleasures do Joy Division. NOTA: só funciona no Google Chrome.

A “baleia de falha” do Twitter

Steve Dennis levou a famosa baleia de falha do Twitter para um nível totalmente novo, quando fez uma versão animada usando CSS puro. A animação CSS3 também funciona, surpreendentemente, bem no Internet Explorer 6! (Se é que alguém ainda o usa hoje em dia!).

Espero que tenham gostado!

Curtiu? Dê RT e compartilhe!
Pode também nos seguir em nossa fanpage, twitter ou pinterest.