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.