CSS Animation - Mini Tutorial

Mini tutorial apresentando as principais propriedades do CSS Animation e como criar animações simples de entrada/loading com o mesmo. A parte de animação começa em 06:36. 00:00 Projeto 00:15 Estrutura Inicial 05:15 JavaScript 06:36 keyframes 08:01 animation-name 08:20 animation-duration 09:14 animation-fill-mode 10:20 transform: translateX(); 11:45 animation-timing-function 12:45 animation-delay 13:15 animation-direction 13:48 animation-play-state 14:05 animation-iteration-count 14:35 animation 15:15 load estrutura 16:35 load keyframes 17:11 load animation 18:00 mais keyframes 21:20 Ferramenta Arquivos https://github.com/origamid/publico/tree/main/css-animation-mini-tutorial Exemplo: https://origamid.github.io/publico/css-animation-mini-tutorial/ Ferramenta Utilizada https://www.code.origamid.dev/ Cursos da Origamid https://www.origamid.com/cursos/ No passado eu também criei uma sequência de tutoriais (escritos) com mais detalhes sobre cada uma das propriedades do CSS Animation: https://www.origamid.com/codex/mini-curso-de-css-animation/ A animação do modal feita no vídeo, também pode ser feita utilizando simplesmente o: transition: all .3s; Porém o objetivo da aula foi apresentar o CSS Animation. Com o transition você possui menor controle e também não conseguiria fazer a animação do spinner e outras mais complexas com o mesmo.