Como criar animações suaves entre estados de elementos com CSS transitions
A propriedade transition faz com que a mudança de um estilo aconteça de forma gradual, ao invés de instantânea. É a forma mais simples de adicionar movimento e fluidez a uma interface.
Carregando...Sem o transition, a cor mudaria instantaneamente ao passar o mouse. Com ele, a mudança acontece em 0.3 segundos.
A propriedade transition aceita quatro valores:
Carregando...background-color, width, opacity, etc.);0.3s, 500ms);O ritmo da animação define se ela começa rápida e desacelera, ou o contrário.
Carregando...Para animar mais de uma propriedade, separe com vírgula ou use all.
Carregando...Usar all é mais prático, mas pode causar animações indesejadas em propriedades que você não queria animar.
O delay define quanto tempo esperar antes de iniciar a transição.
Carregando...Transições são usadas com frequência em:
opacity;transform;transform: scale().