Gerador de Transição CSS

O CSS Transition Generator é um editor visual para a propriedade de transição CSS Você escolhe qual propriedade animar, define a duração, escolhe uma função de temporização e adiciona um atraso e, em seguida, aciona uma visualização ao vivo para assistir à flexibilização exata antes de copiar a declaração. Você pode colocar várias transições em uma abreviação - por exemplo, desvanecimento da opacidade enquanto move uma transformação - e cada camada obtém sua própria propriedade, duração, tempo e atraso.

Uma transição diz ao navegador para animar a mudança entre dois valores de uma propriedade em vez de mudar instantaneamente Altere uma cor de fundo no hover sem transição e ele se encaixa; adicione transição: facilidade de 200 ms de cor de fundo e a mesma mudança facilita mais de um quinto de segundo A transição vive no estado base, não no estado de hover, então o elemento anima tanto para dentro quanto para fora da mudança, que é o que faz uma interação parecer terminada em vez de abrupta no caminho de volta.

Tudo acontece no seu navegador Comece a partir de uma predefinição como Fade, Button hover ou Bounce, ajuste os controles deslizantes e seleciona, pressione o gatilho de visualização para ver o movimento e copie a abreviação A ferramenta escreve as quatro partes na ordem que a especificação requer - propriedade, duração, temporização-função, atraso - e omite o atraso quando é zero Nenhuma conta, sem uploads, e ele continua funcionando offline uma vez que a página tenha carregado.

O único erro mais comum é tentar fazer a transição de uma propriedade que não tem valores intermediários. display: nenhum para exibir: block não pode animar, porque display não é uma propriedade animável - não há meio caminho entre nenhum e block - e é por isso que um fade-in construído apenas no display salta A correção é fazer a transição de opacidade e visibilidade juntos, ou usar o comportamento discreto de permissão mais recente Também vale a pena animar transformação e opacidade em preferência a largura, altura, topo ou esquerda: os dois primeiros são compostos na GPU e não acionam layout, para que eles permaneçam suaves, enquanto animando propriedades de layout recalcula a página em cada quadro e é a fonte usual de transições irritadiças e gaguejantes.