6XC

Gerador de Transition CSS

Crie uma transition — propriedade, duração, função de temporização e atraso — e teste ao vivo com um clique.

916 visualizações

A Propriedade transition

Sintaxe: transition: propriedade duração função-de-temporização atraso. Ela anima mudanças acionadas por hover, foco ou troca de classe. A função de temporização define a sensação: ease é o padrão natural, ease-out é ideal para entradas, e curvas cubic-bezier personalizadas criam efeitos elásticos de overshoot. Pressione o botão de teste para ver suas configurações em ação.

Perguntas Frequentes

Quais propriedades são baratas de animar?

transform e opacity — o navegador consegue compô-las na GPU sem recalcular o layout. Animar width, height ou top força um recálculo de layout em cada quadro e pode travar.

Qual é uma boa duração padrão?

150-250 ms para pequenos feedbacks de interface (botões, hover) e 300-500 ms para movimentos maiores. Acima de ~700 ms as interfaces começam a parecer lentas.

Ferramentas Semelhantes

Gerador de Gradiente CSS Crie gradientes CSS lineares, radiais e cônicos com pré-visualização ao vivo e copie o código. Gerar Gerador de Sombra CSS (Box Shadow) Desenhe uma box-shadow visualmente — deslocamentos, desfoque, expansão, cor, opacidade e inset — com pré-visualização em tempo real. Gerar Gerador de Border Radius CSS Arredonde cada canto individualmente ou todos de uma vez, em px ou %, com pré-visualização ao vivo e CSS copiável. Gerar Gerador de Sombra de Texto CSS Crie um text-shadow com deslocamentos, desfoque, cor e opacidade — pré-visualização ao vivo em texto de exemplo. Gerar