CSS 3 Animações para Web

Se seu objetivo é transmitir informações de forma criativa em seu site para a exibição no iPad ou iPhone, uma das melhores opções para adicionar animação e outros recursos interativos é usar CSS 3. CSS 3 introduz três principais formas de criar efeitos interativos e animações: transformações, transições e animações.

CSS 3 acrescenta vários novos recursos de design, mas a animação é o mais emocionante. Usando CSS 3, você pode fazer personagens atravessar a tela, caixas de virar e imagens desaparecer. Para demonstrar como a animação funciona com CSS 3, esta figura mostra uma simples bola que rebate em uma caixa preta.

Não há imagens foram usadas para criar esta animação bola quicando. A bola em si - e a ação que faz com que pareça saltar do topo da tela para o fundo e vice-versa - foi tudo conseguido com apenas algumas linhas de CSS 3 código.

Animações como este trabalho em navegadores mais populares que usam WebKit, incluindo Safari (no Mac, Windows e iOS para iPad / iPhone / iPad) e Chrome (no Mac, Windows e dispositivos que executam o sistema operacional Android, do Google).

Você pode criar muitos grandes efeitos do projeto com estas características, mas os sites mais interativos que você vê na web hoje requer javascript, além de HTML e CSS.