Gerador de Animação Keyframe CSS
Gere animações CSS @keyframes a partir de predefinições prontas (pulo, tremor, pulso, desvanecer, deslizar entrada, girar, balanço, fita elástica, piscar, oscilação) com duração, easing, atraso, contagem de iteração e direção — copie os keyframes mais o shorthand de animação para aplicá-lo.
Entrada
Duração de um ciclo de animação completo, em segundos.
Tempo de espera antes do início da animação.
A positive whole number, or "infinite" to loop forever.
Saída
Mais formas de usar esta ferramenta
API REST
curl -X POST https://api.iotools.cloud/v1/tool/css-keyframe-animation-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"animationType": "fadeIn",
"duration": "1",
"timingFunction": "ease-in-out",
"delay": "0",
"iterationCount": "1",
"direction": "normal"
}'Troque pela sua própria chave, da sua conta. Os campos da ferramenta viram o corpo da requisição — sem envelope.
Peça a um agente de IA
Use the IOTools `css-keyframe-animation-generator` tool (CSS Keyframe Animation Generator) on this input:
YOUR_INPUT_HERECole isto em qualquer agente conectado ao servidor MCP do IOTools e depois adicione sua entrada.
Widget para incorporar
<iframe
src="https://iotools.cloud/embed/css-keyframe-animation-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Gerador de Animação Keyframe CSS — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Coloque isso na sua própria página — grátis, sem chave, só um link de volta.
| Custo por chamada de API/MCP | A partir de 5 créditos |
|---|---|
| Precisa de mais créditos? | Ver preços |
Também disponível via
Guias
Uma animação de keyframe CSS define como o estilo de um elemento muda ao longo de um ciclo de animação, usando a regra at @keyframes para descrever uma série de etapas (0% a 100%) e a propriedade shorthand animation para aplicar essas etapas a um elemento com duração, easing, atraso, contagem de repetição e direção. Animações de keyframe são o que permite um botão pulsar, um cartão desaparecer ou um ícone de notificação tremer — tudo sem JavaScript e em execução no thread do compositor do navegador para movimento suave e eficiente.
Este gerador cria ambas as partes para você: o bloco @keyframes com as paradas de percentual corretas e propriedades para uma predefinição escolhida, e a regra .animated-element { animation: ...; } correspondente que o aplica. Copie ambas em sua folha de estilos e substitua .animated-element por seu próprio seletor.
Como usar
- Escolha uma predefinição — Pulo, Tremor, Pulso, Desvanecer, Deslizar Entrada Esquerda, Girar, Balanço, Fita Elástica, Piscar ou Oscilação. Cada predefinição é uma sequência pronta de etapas
transform/opacitymodelada nos efeitos bem conhecidos popularizados por bibliotecas de animação como Animate.css. - Defina a duração em segundos — quanto tempo um ciclo completo leva.
- Escolha uma função de tempo —
ease,ease-in,ease-out,ease-in-outoulinear— para controlar a curva de aceleração. - Defina um atraso em segundos se quiser que a animação aguarde antes de iniciar.
- Defina a contagem de iteração — um número inteiro como
1ou3, ouinfinitepara repetir para sempre. - Escolha uma direção —
normalreproduz para frente cada ciclo,reversereproduz para trás,alternatealterna a direção a cada outro ciclo ealternate-reversecomeça invertido e alterna. - Copie o CSS gerado e cole em sua folha de estilos, ou baixe como arquivo
.css.
Perguntas Frequentes
Por que o seletor .animated-element?
É um placeholder para que o CSS esteja pronto para colar — renomeie para corresponder ao elemento que deseja animar (uma classe, um ID ou qualquer seletor).
Posso usar essas predefinições com qualquer elemento HTML?
Sim. As animações @keyframes se aplicam a qualquer elemento através da propriedade animation; algumas predefinições (como Deslizar Entrada Esquerda) parecem melhores em elementos de nível de bloco com dimensões definidas.
Qual é a diferença entre iteration-count: infinite e um número?
Um número executa a animação esse número de vezes e depois para no seu quadro final (a menos que animation-fill-mode diga o contrário). infinite se repete para sempre — útil para carregadores e spinners como a predefinição Girar.
Essas animações afetam o desempenho da página?
Animar transform e opacity (o que cada predefinição aqui usa) é acelerado por GPU em navegadores modernos e é a abordagem recomendada para animação CSS suave — mais barato do que animar propriedades de layout como width, top ou margin.
Posso combinar várias predefinições em um elemento?
Não diretamente nesta ferramenta, mas você pode listar vários valores shorthand animation separados por vírgula à mão depois de ter dois blocos gerados, desde que seus nomes @keyframes não entrem em conflito.
Privacidade
Tudo é executado localmente em seu navegador — suas configurações nunca saem do seu dispositivo e nenhum CSS é enviado a um servidor para ser gerado.