LocalToolsColeção de ferramentas offline para navegador

Categoria: Desenvolvimento

Gerador de CSS Keyframes

Ideia nossaFalta uma ferramenta?

Escolha uma predefinição de animação e copie o bloco @keyframes

Escolha uma predefinição de aparecer, deslizar, quicar, pulsar ou girar, defina a duração, a função de tempo, o número de iterações e a direção, e copie o bloco @keyframes completo mais o atalho animation que o usa, com prévia ao vivo.

Saída
@keyframes localtools-preview {
  from {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-24px);
  }

  60% {
    transform: translateY(0);
  }

  80% {
    transform: translateY(-12px);
  }

  to {
    transform: translateY(0);
  }
}

.element {
  animation: localtools-preview 1.2s ease-in-out infinite normal;
}

A prévia reinicia sempre que você muda a predefinição, usando exatamente o CSS mostrado abaixo.

Tudo nesta página é processado no seu navegador. Nada é enviado.

Para que serve

Escrever um bloco @keyframes à mão significa nomear paradas percentuais e acertar os valores das propriedades em cada uma para interpolar da forma esperada, o que é fácil de errar sutilmente em algo como um quique com várias paradas. Esta ferramenta traz um punhado de formas de animação comuns como listas de paradas já prontas, e permite ajustar os controles de tempo que não alteram os keyframes em si, então a prévia sempre corresponde exatamente ao bloco CSS mostrado abaixo dela.

Como usar

  1. Escolha uma predefinição de animação.
  2. Defina a duração, a função de tempo, o número de iterações e a direção.
  3. Copie o bloco @keyframes e o atalho animation logo abaixo dele.

Privacidade

Esta ferramenta roda inteiramente no seu navegador. O que você digita nunca é enviado, salvo ou compartilhado — fechar a aba já remove tudo.

Perguntas frequentes

Por que a prévia reinicia quando eu mudo a predefinição?
Trocar de predefinição substitui as paradas do @keyframes subjacente, então o elemento de prévia é remontado para garantir que a animação em execução corresponda exatamente à que acabou de ser gerada, em vez de terminar uma desatualizada.
O que o número de iterações "infinite" faz?
Ele repete a animação para sempre, que é o que a prévia usa por padrão; defina um número em vez disso se quiser que ela toque um número fixo de vezes e depois pare.
Algo é enviado a um servidor?
Não. O bloco @keyframes e o atalho animation são construídos na página a partir da predefinição e das opções de tempo escolhidas, por isso a prévia se atualiza na hora.

Voltar para todas as ferramentas