Gerador de animação CSS (keyframes)
Monte o @keyframes de uma propriedade e a declaração animation com duração, repetição e direção.
- Roda no seu navegador
Resultado
O resultado aparece aqui.
O que o gerador monta
Duas saídas: o bloco @keyframes, com dois ou três passos, e a declaração animation com os valores diferentes do padrão. O nome vem do campo de nome.
| Campo | Observação |
|---|---|
| Nome | letras minúsculas, números e hífen, começando por letra, até 40 caracteres |
| Propriedade animada | opacidade, deslocamento X ou Y, escala ou rotação |
| Passo do meio | opcional, entre 1% e 99% |
| Duração e atraso | em milissegundos; saem em segundos quando a conta é exata |
Resultados de referência: animação CSS (keyframes)
| Escolhas | Declaração gerada |
|---|---|
| opacidade de 0 a 100 em 1 segundo | animation: fade-in 1s; |
| rotação de 0 a 360, linear, infinita | animation: spin 1s linear infinite; |
| escala de 100 a 120, alternada, infinita | animation: pulse 1s ease-in-out infinite alternate; |
O bloco da rotação é: @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
Nomes recusados
Palavras como none, infinite, ease ou alternate, que o shorthand animation leria como outro valor, são recusadas como nome, assim como maiúsculas, espaços e acentos.
Perguntas frequentes
Como fazer animação css com keyframes?
Escolha o nome, a propriedade e os valores inicial e final. Uma opacidade de 0 a 100 em 1 segundo gera: animation: fade-in 1s;
O gerador de animação css cria animação infinita?
Sim. Marque a opção de repetição infinita; ela substitui o número de repetições na declaração.