Ir para o conteúdo
TextArray1.87.0
Totalmente local

Gerador de CSS keyframes

Converta passos percent;property:value numa bloco @keyframes e sua declaração de animação.

Entrada
Saída
Ferramentas relacionadas
Gerador de gradiente CSSFerramentas de desenvolvedor
Gerador de CSS box-shadowFerramentas de desenvolvedor
Gerador de grid CSSFerramentas de desenvolvedor
diferença de chave i18nFerramentas de desenvolvedor
Conversor de TOML para JSONFerramentas de desenvolvedor
SQL para JSONFerramentas de desenvolvedor
Gerador de CSS keyframes
Cole passos de keyframe como percent;property:value — uma linha por marcador, como 0;opacity:0 seguido de 100;opacity:1 — e esta ferramenta monta um bloco @keyframes completo mais a declaração de atalho de animação correspondente. Adicione vários pares property:value na mesma linha, separados por ponto-e-vírgula, para animar mais de uma propriedade nesse marcador, e reutilize uma percentagem em várias linhas para continuar adicionando propriedades a ela.
Escolha uma predefinição — desvanecimento, deslizamento, pulsação, tremor ou ressalto — para pular a escrita de passos manualmente e obter uma animação pronta com todas as opções ainda ajustáveis, ou mude a predefinição para personalizado para controlar cada marcador a partir da sua própria entrada. As opções restantes moldam a declaração de atalho de animação: o nome define o identificador partilhado pela regra @keyframes e a declaração de animação, duração e atraso estão em segundos, e a função de temporização abrange todas as palavras-chave padrão mais uma curva cubic-bezier() personalizada para uma forma de easing exacta. Defina a animação para repetir um número fixo de vezes ou ative infinito, escolha uma direção (normal, reverso, alternado, alternado-reverso) e um modo de preenchimento para o que acontece antes e depois de executar, e ative a opção de prefixo webkit para emitir também um bloco @-webkit-keyframes e uma linha -webkit-animation para compilações Safari e Android WebView antigas.
Os valores de percentagem fora de 0–100 são fixados no intervalo, "from" e "to" são aceites como aliases para 0 e 100, e linhas em branco ou malformadas são ignoradas em vez de quebrar o resultado. A contagem no resultado informa quantas paragens de keyframe foram geradas e a contagem exacta de caracteres.
Tudo funciona localmente no seu navegador conforme escreve — nenhum dado CSS ou de animação é nunca enviado para um servidor. Copie o resultado, descarregue-o como ficheiro .txt, ou reenvie o resultado para a entrada para continuar a refinar os passos.
FAQ
Como é realmente o formato de entrada?
Uma linha por marcador de keyframe: uma percentagem, um ponto-e-vírgula, depois property:value. Adicione mais pares property:value na mesma linha, cada um separado por ponto-e-vírgula, para animar várias propriedades ao mesmo tempo — por exemplo 50;opacity:0.5;transform:scale(1.1).
O que acontece quando escolho uma predefinição como desvanecimento ou ressalto?
A ferramenta usa um conjunto incorporado de passos de keyframe para essa predefinição e ignora tudo o que está na caixa de entrada, enquanto todas as outras opções — nome, duração, temporização, direção e assim por diante — ainda se aplicam. Mude para personalizado para usar novamente a sua própria entrada.
Como obtenho uma curva de easing personalizada exacta?
Defina a função de temporização para personalizado e introduza quatro números separados por vírgulas no campo cubic-bezier, como 0.25, 0.1, 0.25, 1. Um valor inválido retorna a ease em vez de produzir CSS quebrado.
Qual é a diferença entre contagem de iterações e infinito?
A contagem de iterações define quantas vezes a animação é executada antes de parar. Ativar infinito substitui isso e repete a animação indefinidamente.
Os meus dados de animação são enviados para algum lugar?
Não. O bloco @keyframes e a declaração de animação são gerados completamente no seu navegador — nada do que escreve nunca sai do seu dispositivo.