Anúncios incomodam? Ir Sem anúncios Hoje 

Gerador de Animação de Chave CSS

CorDesenvolvedor

ANUNCIADO Remover?

ENTRADA

Processo Automático

Predefinição de animação

Predefinição

Configurações de Animação

Nome

Duração (s)

Aceleração

cubic-bezier()

Iterações

Infinito

Direção

Modo de preenchimento

Chaves

SAÍDA

Lado cliente

ANUNCIADO Remover?

Guia

Gerador de Animação de Chave CSS

Crie animações @keyframes CSS visualmente com uma prévia em tempo real. Escolha entre 10 predefinições populares como pulo, vibração, pulso, entrada de desvanecimento, entrada por deslizamento, rotação, balanço, banda de borracha, flash e trem — ou crie sua própria animação de chaves do zero. Ajuste a duração, a aceleração, o número de iterações, a direção e o modo de preenchimento, depois copie o código CSS gerado.

Como usar

Escolha uma animação pré-definida ou comece com uma animação personalizada. Configure as configurações da animação — nome, duração, função de aceleração, número de iterações, direção e modo de preenchimento. Edite os pontos de chave ao definir a porcentagem, o valor de transformação e a opacidade para cada ponto. Adicione ou remova pontos de chave conforme necessário. Observe a prévia em tempo real atualizando-se em tempo real, depois copie o código CSS gerado.

Características

10 Predefinições de animação – Bounce, shake, pulse, fade in, slide in, spin, swing, rubber band, flash e wobble prontos para uso
Editor de chave personalizada – Adicione, remova e edite pontos de chave com controles de porcentagem, transformação e opacidade
Prévia em tempo real de animação – Veja sua animação sendo reproduzida em um elemento de demonstração em tempo real enquanto faz alterações
Controle completo da animação – Configure a duração, a aceleração (incluindo custom cubic-bezier), o número de iterações, a direção e o modo de preenchimento
Saída de CSS Limpo – Gera tanto a regra @keyframes quanto a propriedade de animação abreviada, prontos para colar em seu estilo

ANUNCIADO Remover?

 Perguntas frequentes

O que são CSS @keyframes?

Os CSS @keyframes definem as fases de uma sequência de animação. Cada chave especifica estilos em um ponto particular durante a linha do tempo da animação, expresso como uma porcentagem de 0% (início) a 100% (fim). O navegador interpola os valores das propriedades entre as chaves para criar transições suaves.
Qual a diferença entre transições CSS e animações CSS?

As transições CSS animam uma mudança de propriedade entre dois estados (por exemplo, ao passar o mouse), acionadas por uma mudança de estado. As animações CSS usando @keyframes podem rodar automaticamente, repetir, ter múltiplos passos intermediários e oferecer mais controle com propriedades como animation-direction, iteration-count e fill-mode.
O que faz a propriedade animation-fill-mode?

A propriedade animation-fill-mode controla como os estilos são aplicados antes e após a animação ser reproduzida. 'forwards' mantém os estilos da última chave após a animação terminar. 'backwards' aplica os estilos da primeira chave durante o período de atraso. 'both' aplica ambos os comportamentos. 'none' reverte para os estilos originais do elemento.
O que é uma função de aceleração cubic-bezier?

Uma função de aceleração cubic-bezier define uma curva personalizada de velocidade para uma animação usando quatro pontos de controle (x1, y1, x2, y2). Ela determina se a animação avança mais rápido ou mais devagar em diferentes pontos do tempo. As predefinições comuns como ease, ease-in e ease-out são atalhos nomeados para valores específicos de cubic-bezier.