Ferramenta

Playground de animação

Mexa nos controles e veja o efeito na hora. O código sai pronto do lado — e sai em CSS puro sempre que os parâmetros couberem em CSS. Biblioteca só quando você liga a cascata, porque aí o atraso de cada item precisa ser calculado.

Efeito

Curva

Duração — 420 ms

Faixa boa para algo entrando em cena.

Atraso — 0 ms

Cascata (vários itens)

Sem cascata o código sai em CSS puro, sem dependência.

Resultado

Elemento

CSS

.elemento {
  animation: entrar 420ms cubic-bezier(0.33, 1, 0.68, 1) 0ms both;
}

@keyframes entrar {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .elemento { animation: none; }
}

Como usar isto para decidir, não só para brincar

A utilidade real de um playground não é gerar código — é calibrar a intuição. Três experimentos que valem a pena:

Ache o ponto em que fica lento. Comece em 200 ms e vá subindo. Em algum lugar entre 500 e 700 ms você para de achar elegante e começa a achar arrastado. Esse é o teto que você deveria usar no seu produto.
Compare as curvas com a mesma duração.Troque só a curva, mantendo o resto. A diferença entre "constante" e "desacelera" é maior do que a maioria das pessoas imagina — e é de graça.
Ligue a cascata e aumente o intervalo. Acima de uns 120 ms por item, uma lista de dez elementos leva mais de um segundo para terminar de aparecer. Bonito na demonstração, irritante em uso real.

O que o código gerado já traz

A saída em CSS inclui a regra de prefers-reduced-motion, que desliga a animação para quem configurou o sistema para menos movimento. Não é detalhe opcional: existe gente que sente náusea e tontura com movimento na tela.

O both no final da declaração faz o elemento respeitar o estado inicial antes de a animação começar e manter o final depois — sem ele, aparece um piscar no primeiro quadro.

Onde parar

Se você precisa encadear várias etapas, reagir à rolagem, pausar ou inverter, o playground não vai dar conta — e nem deveria. Esses casos pedem linha do tempo de verdade. Para o que é a maior parte do trabalho real, porém, é isto aqui: um elemento entrando, com duração curta e curva que desacelera.

Peças prontas e comentadas estão no acervo de animações, e o raciocínio por trás das escolhas está no artigo sobre animação que comunica.