Gerador de Transitions

Configure propriedade, duração, easing e delay para transições suaves.

Animação & Interação

Passe o mouse
na área ao lado

 estilo.css

transition-property

Define quais propriedades CSS serão animadas ao mudar de estado (ex: no :hover). 'all' anima qualquer propriedade que mude.

transition-timing-function

Controla a curva de aceleração da animação — 'ease-in-out' começa e termina devagar; 'linear' mantém velocidade constante.

Perguntas frequentes

Qual a diferença entre transition e animation?

Transition anima entre dois estados (ex: normal e :hover); animation, via @keyframes, permite sequências com múltiplos pontos e repetição.

Transition funciona sem :hover?

Sim — qualquer mudança de valor da propriedade (via classe JS, :focus, :checked etc.) dispara a transição.

Como evitar transições bruscas em mudança de tema?

Aplique uma transition curta e genérica em background-color e color no elemento raiz do site.