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
github.com/origamid/publico/t...
Exemplo:
origamid.github.io/publico/cs...
Ferramenta Utilizada
www.code.origamid.dev/
Cursos da Origamid
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:
www.origamid.com/codex/mini-c...
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.
31 май 2024
