⭐ 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. 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 https://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 https://discord.gg/vDd34XbyQr 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/ ➡️ 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 ========== ⏱️ 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! 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/