UTILS.
100% no navegador
⤿

Gerador de animações CSS

Crie uma animação com keyframes, visualize ao vivo e copie o CSS.

Sobre esta ferramenta

Escolha uma animação predefinida com duração, função de tempo e número de iterações, veja-a rodar ao vivo, depois copie as regras @keyframes e animation. Tudo roda no seu navegador.

Perguntas frequentes

O que o número de iterações controla?
Ele define quantas vezes a animação é reproduzida; escolha infinito para repetir para sempre ou um número para executá-la essa quantidade de vezes.
Como reinicio a animação?
Pressione Repetir — isso remove e reaplica brevemente a animação para que a visualização toque de novo a partir do primeiro keyframe.

Mais ferramentas