Às vezes, é necessário criar animações para mudanças de elementos em uma página web, controlando fatores como velocidade, tempo de atraso e duração. Nesses casos, a propriedade transition pode ser utilizada para realizar essa tarefa.

O elemento sempre possui dois estados: inicial e final. É possível controlar o comportamento da mudança do elemento com o auxílio das seguintes propriedades:

transition-property: 
transition-duration:  
transition-timing-function: 
transition-delay: 

• transition-property - O nome da propriedade CSS que deve ser animada;
• transition-duration - O tempo durante o qual o estado do elemento deve ser alterado. Especificado em segundos (s) ou milissegundos (ms);
• transition-timing-function - Especifica a curva de velocidade do efeito de transição. Valores típicos são ease, linear, ease-in, ease-out e ease-in-out;
• transition-delay - O tempo de atraso antes do início do efeito de transição. Especificado em segundos (s) ou milissegundos (ms).

Cada propriedade será abordada em detalhes ao longo deste curso.

Nota

1 segundo = 1000 milissegundos. Portanto:

• 0.1s = 100ms;
• 2.5s = 2500ms;
• 0.5s = 500ms.

Prática

Por exemplo, queremos adicionar um efeito de transition à cor de fundo do elemento div quando ele estiver em foco com o cursor. Nossa tarefa é:

• Alterar a propriedade background-color;
• O atraso deve ser de 0.1 segundos;
• A mudança de cor deve durar 0.3 segundos;
• Para a timing-function, espera-se o valor ease-in-out, o que significa que começará devagar, acelerará no meio e desacelerará novamente no final.

Passe o cursor sobre o elemento para ver o resultado.

Especificamos todas as propriedades relacionadas à transição no elemento div e, em seguida, para o hover, definimos apenas a decoração que gostaríamos de visualizar.