Gerador de Animação CSS
Crie animações de keyframes CSS de forma visual. Escolha um preset como fade, slide, bounce, pulse, spin ou shake, ajuste a duração, a função de tempo, o atraso, o número de repetições e a direção, veja uma prévia ao vivo executando a animação e copie o CSS completo com @keyframes e a propriedade animation.
O Gerador de Animação CSS é uma ferramenta visual gratuita para criar animações de keyframes em CSS. Escolha um preset pronto como fade, slide, bounce, pulse, spin ou shake e ajuste a duração, a função de tempo, o atraso, o número de repetições e a direção com controles simples. Uma caixa de prévia ao vivo executa a sua animação conforme você muda as opções, e a ferramenta gera o bloco @keyframes completo e a forma abreviada animation para você copiar direto na sua folha de estilos. Tudo roda no seu navegador, sem cadastro.
O que é um gerador de animação CSS?
Animações CSS movem um elemento entre estilos definidos em um conjunto de @keyframes, controlados pela propriedade animation. Escrevê-las à mão exige digitar os percentuais dos keyframes e lembrar a ordem dos valores da forma abreviada animation. Este gerador oferece uma biblioteca de presets de animações comuns e um controle para cada parte da propriedade animation, aplica o resultado a um elemento de prévia ao vivo e imprime o CSS de @keyframes e animation correspondente para você copiar.
Como usar o gerador de animação CSS
Criar uma animação leva apenas alguns passos:
- Escolha um preset de animação como fade, bounce, pulse ou spin.
- Defina a duração em segundos de quanto dura um ciclo da animação.
- Escolha uma função de tempo como ease, linear, ease-in-out ou uma curva cubic-bezier.
- Adicione um atraso, um número de repetições ou infinito e uma direção como alternate.
- Veja a prévia ao vivo e copie o CSS de @keyframes e animation gerado.
Como funciona a forma abreviada animation do CSS?
A forma abreviada animation reúne várias propriedades longhand em uma única linha. Nesta ferramenta a ordem é nome, duração, função de tempo, atraso, número de repetições e direção. O nome aponta para o bloco @keyframes, a duração define a duração de um ciclo e a função de tempo molda a curva de velocidade. O atraso espera antes de a animação começar, o número de repetições a repete uma quantidade de vezes ou para sempre com infinite, e a direção controla se cada ciclo toca para frente, ao contrário ou alternando.
O que fazem o número de repetições e a direção?
O número de repetições é quantas vezes a animação roda. Um número inteiro a toca essa quantidade de vezes, enquanto infinite a repete para sempre, ideal para spinners e pulsações. A direção decide como cada ciclo toca: normal vai para frente, reverse vai para trás, alternate alterna entre frente e trás a cada ciclo e alternate-reverse começa para trás e depois alterna. Combinar infinite com alternate é uma forma comum de criar um efeito suave de vai e volta.
Por que usar este gerador de animação CSS?
- 100% gratuito, sem anúncios, cadastro ou limites.
- Uma biblioteca de presets cobrindo fade, slide, bounce, pulse, spin, shake e mais.
- Elemento de prévia ao vivo que realmente executa a sua animação enquanto você ajusta.
- Controles para duração, função de tempo, atraso, número de repetições e direção.
- Gera o bloco @keyframes completo e a forma abreviada animation, prontos para copiar.
- Roda inteiramente no seu navegador, então nada é enviado.
Perguntas frequentes
O gerador de animação CSS é gratuito?
Sim. Todas as ferramentas do ToolsSoup são totalmente gratuitas, sem conta, cadastro ou limites ocultos.
O CSS de animação gerado funciona em todos os navegadores?
Sim. A propriedade animation e os @keyframes são suportados em todos os navegadores modernos, incluindo Chrome, Firefox, Safari e Edge, então o CSS que esta ferramenta produz funciona sem prefixos de fornecedor.
Como faço uma animação repetir para sempre?
Marque a opção Infinito no número de repetições. Isso define o iteration-count como infinite no CSS gerado, então a animação se repete sem fim, que é o que você quer para spinners, pulsações e indicadores de carregamento.
Meus dados são enviados para algum lugar?
Não. O gerador roda inteiramente no seu navegador, então nada do que você configura é enviado ou armazenado em servidores.