Playground de Animação CSS

O que faz

O Playground de Animações CSS deixa você desenhar e pré-visualizar animações CSS ao vivo no seu navegador. Escolha uma propriedade animada (mover, escalar, esmaecer, girar), ajuste duração e atraso, escolha uma curva de easing embutida - ou esculpa sua própria cubic-bezier arrastando as alças dos pontos de controle - e então copie o CSS exato de @keyframes e animation para colar direto no seu projeto. Tudo roda no cliente, então nada do que você ajusta sai da sua máquina.

Como usar

1. Use o controle segmentado Property para escolher o que anima: Move (translateX), Scale, Fade (opacity) ou Spin (rotate).
2. Defina Duration (ms) e Delay (ms) com os steppers numéricos.
3. Escolha um preset de Easing (Linear, Ease, In, Out, In-out), ou selecione Custom para abrir o editor de curva.
4. No editor de curva, arraste as duas alças de destaque para moldar a cubic-bezier. O caminho azul e a pré-visualização atualizam instantaneamente enquanto você arrasta.
5. Alterne Iterations entre Once e Loop.
6. Pressione Play para reproduzir a pré-visualização do início a qualquer momento, ou Reset para restaurar os padrões.
7. Use Copy para copiar o CSS gerado no painel de saída.

Exemplos

Um esmaecimento ágil (ease-out, 250ms, uma vez)

@keyframes cssap-anim {
  from { opacity: 1; }
  to { opacity: 0.15; }
}

.preview {
  animation: cssap-anim 250ms cubic-bezier(0,0,0.58,1) 0ms 1;
}

Um easing personalizado

Defina Easing como Custom, então arraste a primeira alça rumo ao canto inferior esquerdo e a segunda rumo ao canto superior direito para uma sensação de início rápido e assentamento suave. A cubic-bezier(...) gerada atualiza para acompanhar - copie-a para sua própria regra transition ou animation.

Bom saber

• Easing personalizado: arraste as duas alças de destaque dentro da caixa unitária para moldar a curva; o caminho ao vivo e a pré-visualização acompanham suas edições em tempo real.
• Pronto para copiar e colar: renomeie os keyframes cssap-anim e o seletor .preview para casar com sua própria marcação - o restante do CSS está pronto para produção.
• Privado: a ferramenta inteira roda no seu navegador - nenhum parâmetro de animação é enviado a um servidor.
• Ferramentas relacionadas:

  Base64Base64An encoding representing binary data as 64 safe ASCII characters, so it survives transport through text-only channels. It encodes — it does not encrypt.

  , JSON Formatter e o restante do conjunto CSS & Layout.