⭐ Minicurso Animações CSS

Minicurso completo Animações CSS (CSS Animation) para você começar (ou revisar) suas bases de Animação de Interface / Motion UI.

⏱️ Timestamps
00:00 Intro
01:19 O propósito da animação
02:09 3 tipos de animação de interfaces
05:28 transform
09:52 transition
13:32 @keyframes
17:09 Propriedades animation-*
26:03 Exemplo prático 1: background degradê
29:28 Exemplo prático 2: setinha animada
31:26 Exemplo prático 3: Text Reveal
36:42 Indicação de mais exemplos práticos
37:13 Exemplo prático 4: Animação de entrada em LP
47:43 Indicação de ferramentas
52:21 Considerações finais

⭐ Tão importante quanto saber escrever CSS, é saber como organizar seu projeto
https://www.cssalemdosensocomum.com.br/

Animações CSS (CSS Animation) são um assunto muito importante no front end, além de estar numa crescente de importância e demanda nos últimos anos.

Fica cada vez mais evidente que animação de interface não é apenas uma "firula" ou algo bonitinho para se ter em sites e apps, mas que traz ganhos reais e aumentam consideravelmente a UX de um projeto Web.

Em nosso minicurso de animação CSS (inédito), mostramos não somente a prática e códigos para animações com CSS, mas também abordamos a parte teórica, mostrando a importância de considerar sim o uso de motion UI.

Abordamos o propósito da animação, os 3 tipos de animação de interface, CSS transform e transition, @keyframes, propriedades animation-*, além de vários exemplos práticos e indicações de ferramentas.

Então, vem com a gente aprender mais sobre o maravilhoso e apaixonante mundo das Animações CSS!

🌐 Easing Functions Cheat Sheet
https://easings.net/

🌐 cubic-bezier.com
https://cubic-bezier.com/

🌐 Animista
https://animista.net/

🌐 Animatable CSS properties
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

💬 Assine nossa newsletter
https://recursosfrontend.desenvolvimentoparaweb.com/

✏️ Princípios Jedi de Motion UI (parte 1): tipos de animação de interface
https://desenvolvimentoparaweb.com/ux/motion-ui-principios-tipos-animacao-interface/

✏️ Jumps: o novo steps() em Web Animation
https://desenvolvimentoparaweb.com/css/jumps-steps-css-web-animation/

💬 Slack dpw
https://join.slack.com/t/desenvolvweb/shared_invite/zt-ddox19v6-gHGHhyzogOPytu4XT8Po1g

➡️ Basic Front Boilerplate (BFB)
https://www.youtube.com/watch?v=Uoch-xwx1yU

➡️ O Básico de Sass para se Virar nas Webs
https://www.youtube.com/watch?v=kA-PXyfjL84

==========

Assine o canal! http://bit.ly/dpw-youtube

- Facebook: https://www.facebook.com/desenvolvweb/
- Instagram: https://www.instagram.com/desenvolvweb/
- Twitter: https://twitter.com/desenvolvweb

Conheça o blog desenvolvimento para web: https://desenvolvimentoparaweb.com/

Видео ⭐ Minicurso Animações CSS канала dpw