a11y.skipToMainContent
1

Gerador de Animação de Teclados CSS

Escolha uma animação predefinida, ajuste o tempo, assista ao vivo, e copie tanto o bloco @keyframes quanto a abreviatura de animação.

Animation

s
s

Preview

PLAY

CSS

Was this tool helpful?
Send output to:
Advertisement

How to use Keyframes Animation Generator

  1. Clique em uma animação predefinida, como fade-in, salto ou rotação.
  2. Definir duração, função de tempo, atraso, iterações, direção e modo de preenchimento.
  3. Assista a pré-visualização executar e pressione Replay para acionar novamente.
  4. Clique em Copiar CSS para pegar o bloco @keyframes e abreviatura de animação.

O que é {nome}?

O Keyframes Animation Generator cria animações prontas para usar CSS @keyframes. Escolha uma predefinição – fade-in, slide-in, rebote, pulso, shake, spin, flip ou zoom-in – e cada um envia seu próprio bloco de teclas.

Ajustar a duração, função de tempo (incluindo algumas predefinições de bezier cúbico para sobreposição), atraso, contagem de iteração, direção e modo de preenchimento. O elemento de pré-visualização executa sua animação imediatamente e reproduz automaticamente em cada mudança; um botão de repetição aciona-a sob demanda usando um reflow forçado.

A ferramenta funciona inteiramente em seu navegador e sai tanto a definição completa de @keyframes e a combinação de animação abreviatura, para que você possa colar uma animação completa e funcional diretamente em sua folha de estilo.

Advertisement

FAQ

Qual é a diferença entre @keyframes e a propriedade de animação?
@keyframes define o que muda durante a animação (os passos de / para ou porcentagem), enquanto a abreviatura de animação diz um elemento que os frames a usar mais sua duração, facilidade, atraso, contagem e direção. Você precisa de ambos para uma animação de trabalho.
Como faço a animação jogar apenas uma vez ou loop para sempre?
Defina a iteração para um número como 1 para uma única execução, ou marque 'infinito' para loop para sempre. Isto mapeia para o valor de animação-iteração-conta na taquigrafia gerada.

Related tools

Author

MW
Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

📖 Keyframes Animation Generator on Wikipedia·Developer Tools on Wikipedia·Keyframes Animation Generator on Britannica

People also use

← Back to Developer Tools · All tags

Last updated:

Advertisement