Escolha o que anima e por quanto tempo, descreva o estado para o qual o elemento vai e alterne a pré-visualização antes de copiar as duas regras geradas.
Funciona localmente no seu navegadorO gerador devolve um par de regras: uma regra base com a transição abreviada — propriedade, duração, curva e atraso — e uma regra de destino com a transformação, a opacidade, a cor de fundo e o filtro para os quais o elemento muda. Alternar o elemento da pré-visualização executa esse par em um nó real do DOM.
Cada controle sai exatamente como o indicador mostra. Os valores ficam dentro da faixa impressa ao lado de cada campo, e um campo apagado volta ao último valor válido em vez de exportar zero. O cálculo acontece na página: nada é enviado e a ferramenta continua funcionando sem conexão.
A primeira regra traz a transição abreviada: qual propriedade anima, por quanto tempo, com qual curva e com qual atraso. A segunda descreve o estado de destino — transformação, opacidade, cor de fundo e um leve filtro de brilho e saturação — e é aplicada quando você alterna o elemento.
Só animam as propriedades listadas na transição. Se a lista diz opacity, a transformação, a cor e o filtro do estado de destino entram de uma vez; com all, todo valor diferente se move junto. A pré-visualização se comporta do mesmo jeito.
O seletor oferece all, transform, opacity, background-color e filter, as cinco coisas que o elemento da pré-visualização muda. Nomear uma mantém a lista curta, que costuma ser o que um estado hover ou focus pede; all é a escolha segura enquanto você experimenta.
Os predefinidos já trazem essa escolha: Hover lift anima all, Fade anima opacity, Zoom e Soft spin animam transform e Color swap anima background-color. Os outros controles continuam descrevendo o estado de destino, então você pode editar um predefinido e manter o que servir.
A duração vai de 0 a 5000 ms e o atraso de 0 a 3000 ms; os dois são arredondados para milissegundos inteiros. A lista de curvas inclui as cinco palavras-chave do CSS e duas curvas de Bézier cúbicas, e o indicador sempre imprime o valor que aparece na regra exportada.
Como os números são limitados à faixa impressa no campo, a regra exportada nunca leva um valor que o navegador vá descartar ou reinterpretar; um tempo negativo, por exemplo, é lido como atraso em vez de duração. Teste as regras copiadas no elemento real: uma transformação em um ancestral se compõe com a que você anima.