Animações avançadas com CSS3 - Introdução

Faaaaaaaaaaaaaaala galeeeeeera, depois de um tempo internado no hospital, estou voltando com uma mega série sobre CSS para vocês.

Tags: css séries

Faaaaaala galeeeera, esses dias estava meio apagado no blog devido alguns problemas de saúde, mas graças a Deus está tudo bem e bola para frente ;)

Semana passada comecei a desenvolver várias animações no meu codepen utilizando apenas CSS3 e acabei recebendo vários feedbacks positivos e pedidos de tutoriais ensinando a criar alguns destes exemplos. Então tive a idéia de criar mais uma série para nosso blog (já estou devendo a de desenvolvimento de games, mas calma que essa daí está saindo rsrsrs), cujo o nome será:

Animações avançadas com CSS3

- Mas por que "Animações avançadas com CSS3"?


Acho que a melhor forma de explicar o porque escolhi este título é mostrando alguns exemplos que iremos encontrar e desenvolvê-los ao longo da série, tais como:

Round, rouuund!!!

See the Pen Round, roouund!! by clovis neto (@clovisneto) on CodePen.


O Round, rouuund foi a primeira animação que postei na comunidade. Recebi vários comentários e opniões interessantes, que me encorajaram bastante à continuar com a diversão. Observe o código CSS e note que sempre replicamos os circulos e utilizamos apenas uma animação para todos os elementos duplicados, o segredo está apenas na propriedade animation-delay

Ah, vale apena lembrar que não iremos utilizar pré-processadores, pois a idéia no futuro é integrar essas animações com pré-processadores para que possamos notar a diferença do uso de um pré-processador nos nossos projetos.

Pure CSS3 Loader

See the Pen Pure CSS3 Loader by clovis neto (@clovisneto) on CodePen.

Tente ficar 60 segundos olhando para o centro deste loader, rsrsrsrs... Neste exemplo utilizamos bastante as propriedades de border-width, width e border-radius.

Rect!

See the Pen Rect! by clovis neto (@clovisneto) on CodePen.


O esquema do Rect é bastante parecido com o do Round, rouuund pois também utilizamos a técnica de replicação de elementos e o segredo da propriedade animation-delay

Bluup

See the Pen Bluup by clovis neto (@clovisneto) on CodePen.


O Bluup foi uma das animações que eu mais gostei, pois ele meio que parece uma gota de água caindo numa poça ou sei lá rsrsrsrsr... Realmente foi uma viagem minha que no final das contas, achei que ficou legal :)

Webschool

No final dos exemplos que estava desenvolvendo, tive a honra de receber um pedido do meu amigo Jean Carlo Nascimento (Suissa) para desenvolver a logo da sua empresa, a Webschool, utilizando apenas CSS3... Segue o resultado abaixo :)

See the Pen Pure CSS3 Webschool Animated Logo by clovis neto (@clovisneto) on CodePen.


Esses são apenas 4 exemplos, dos vários que iremos desenvolver ao longo do tempo. Nos dias em que estava doente, desenvolvi 8 exemplos mas preparem-se, pois se vocês pretendem acompanhar a série até o final, vou logo avisando que não tenho previsão de términio para ela nem tãaaao cedo rsrsrssrs...

Afinal todos os dias nos deparamos com situações diferentes e idéias de novas animações "Show Man" :)


Bem pessoal, essa foi apenas uma introdução da nova série que está por vim \o/ Espero que gostem e até a proooxima :)