Gerador de animação CSS (keyframes)
Escolha um modelo de animação, ajuste a duração, o ritmo e a repetição, visualize o resultado ao vivo e depois copie o código @keyframes completo. Processamento 100% local — nada é enviado a um servidor.
Como funciona
A regra @keyframes descreve o estado de um elemento em diferentes porcentagens da duração de uma animação, enquanto a propriedade animation conecta essa sequência a um elemento com uma duração, um ritmo e um número de repetições. Escolha um modelo pronto (fade, bounce, rotação...), ajuste os parâmetros e obtenha o código final com sua regra @keyframes e sua declaração animation.
Como aplicar essa animação ao meu próprio elemento?
Copie a regra @keyframes exatamente como está para sua folha de estilo e, em seguida, substitua o seletor .mon-element pela classe ou pelo identificador do elemento HTML que você deseja animar.
Qual curva de ritmo escolher?
ease-in-out serve bem para a maioria das animações de interface, pois começa e termina suavemente; linear é mais adequada a uma rotação contínua (como um indicador de carregamento), enquanto ease-out proporciona um efeito de chegada mais brusca, comumente usado em aparições de elementos.
O código é gerado e pré-visualizado inteiramente no seu navegador, sem conexão com um servidor.