Gerador de easing e transição CSS
Crie uma regra de transição CSS a partir de uma predefinição ou pontos cubic-bezier personalizados, com um gráfico de texto do movimento.
Gerador de easing e transição CSS
Escolha as propriedades que pretende animar, defina uma duração e atraso, e esta ferramenta escreve a regra de transição para si — como CSS simples ou como um bloco de configuração Tailwind que pode inserir diretamente no tailwind.config.js. Cobre as curvas nomeadas comuns (linear, ease, ease-in, ease-out, ease-in-out) mais ease-out-back, uma curva que ultrapassa o valor alvo antes de se estabilizar, que não é uma palavra-chave nativa do CSS e sempre precisa ser escrita como cubic-bezier().
Abaixo da regra gerada, um gráfico de texto representa o progresso da curva em cada ponto no tempo — de 0 no início da animação até 1 no final, com uma barra para cada amostra para que possa ver a aceleração e qualquer ultrapassagem sem abrir ferramentas de desenvolvimento. Mude para "cubic-bezier() personalizado" e introduza os seus próprios quatro pontos de controlo para visualizar uma curva que alguém lhe entregou, ou uma que copiou de uma ferramenta de design; o primeiro e terceiro pontos devem ficar entre 0–1 no eixo do tempo (é um requisito do CSS), mas os valores y podem ultrapassar 0–1, que é exatamente como funcionam as animações de salto e recuo.
O campo de propriedades aceita uma lista separada por vírgulas — transform, opacity, background-color, ou uma propriedade CSS personalizada como --panel-width — e a ferramenta escreve uma linha por propriedade para que a regra fique fácil de ler. Duração e atraso estão em milissegundos; o número de linhas do gráfico é ajustável de 2 até 41 para uma leitura mais grosseira ou fina da curva. Tudo corre localmente no seu navegador: nada do que escreve é enviado para qualquer lugar. Copie o resultado, transfira-o como um ficheiro .txt, ou envie o resultado de volta para a entrada para continuar a ajustá-lo.