Minicurso completo Animações CSS (CSS Animation) para você começar (ou revisar) suas bases de Animação de Interface / Motion UI.
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.
⭐ Tão importante quanto saber escrever CSS, é saber como organizar seu projeto
www.cssalemdosensocomum.com.br/
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.
💬 Entre na comunidade exclusiva dpw para conversar sobre o conteúdo deste vídeo
/ discord
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
easings.net/
🌐 cubic-bezier.com
cubic-bezier.com/
🌐 Animista
animista.net/
🌐 Animatable CSS properties
developer.mozilla.org/en-US/d...
💬 Assine nossa newsletter
recursosfrontend.desenvolvime...
✏️ Princípios Jedi de Motion UI (parte 1): tipos de animação de interface
desenvolvimentoparaweb.com/ux...
✏️ Jumps: o novo steps() em Web Animation
desenvolvimentoparaweb.com/cs...
➡️ Basic Front Boilerplate (BFB)
• Basic Front Boilerplat...
➡️ O Básico de Sass para se Virar nas Webs
• O Básico de Sass para ...
==========
⏱️ 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
==========
Assine o canal! bit.ly/dpw-youtube
- Facebook: / desenvolvweb
- Instagram: / desenvolvweb
- Twitter: / desenvolvweb
Conheça o blog desenvolvimento para web: desenvolvimentoparaweb.com/