Desenho animado com CSS 3


Prática geral sobre diferentes técnicas de animação CSS, na que realizamos um desenho animado por vários elementos que têm diferentes particularidades.

No presente exercício vamos ver como podemos animar um desenho com CSS 3 em vários pontos, que nos darão uma ideia global das possibilidades das animações CSS E que nos oferecerá uma prática completa das técnicas que vimos até o momento.

Se você desejar, pode começar vendo o resultado final deste exemplo. Mas observe que no momento funciona apenas com Chorme ou Safari. Continue lendo “Desenho animado com CSS 3”

Anúncios

TRANSIÇÕES E ANIMAÇÕES EM CSS3


Durante muito tempo o CSS só serviu para pintar quadradinhos e mais nada. Desde quando o pessoal do WaSP organizou todo o movimento dos Padrões Web fazendo com que todos os desenvolvedores, fabricantes de browsers e até mesmo o W3C acreditassem no poder dos padrões não houve grandes atualizações no CSS. Praticamente formatávamos font, background, cor, tamanhos e medidas de distância e posição.
A propriedade transition, a regra keyframe e outras propriedades vieram vitaminar a função que o CSS tem perante o HTML acrescentando maneiras de produzirmos animações e transições. Não estou dizendo que você fará animações complicadas, com diversos detalhes técnicos e etc. Para esse tipo de resultado existem outras ferramentas, incluindo Canvas e SVG, que com certeza farão um trabalho melhor com menos esforço. Mas é fato que as animações via CSS nos ajudará a levar a experiência do usuário para outro patamar. Continue lendo “TRANSIÇÕES E ANIMAÇÕES EM CSS3”