Gerador de animação CSS

Opções

Predefinido

Timing

Duração

Atraso

Função de temporização

Playback

Contagem de iterações

Direção

Modo de preenchimento

Estado

Inativo

Pulse

Entrada de animação

Animação gerada

Quadros-chave gerados

CSS pronto para usar

Esta ferramenta ajuda a criar valores abreviados de animação CSS junto com quadros-chave correspondentes.

É útil para movimentos de interface do usuário, efeitos de foco, revelações de animações, cartões, botões e experimentos rápidos de design.

Escolha uma animação predefinida.
Ajuste a duração, o atraso, a função de temporização, a contagem de iterações, a direção e o modo de preenchimento.
Assista à prévia ao vivo à direita.
Copie a abreviatura da animação, os quadros-chave ou a regra CSS completa.

Use durações mais curtas para animações sutis da interface do usuário.
Use iteração infinita para repetir efeitos como pulso ou salto.
Use o modo de preenchimento quando quiser que o elemento mantenha o estado visual inicial ou final.
Combine isso com CSS Transform Generator para efeitos de movimento mais avançados.