CSS: O Guia Definitivo, 5ª Edição

Capítulo 18. Transições

Este trabalho foi traduzido com recurso a IA. Agradecemos o teu feedback e comentários: [e-mail]

As transições CSS permitem-nos animar as propriedades CSS de um valor original para um novo valor ao longo do tempo. Estas alterações fazem a transição de um elemento de um estado para outro, em resposta a uma alteração. Normalmente, isto envolve uma interação do utilizador, mas também pode dever-se a uma alteração programada da classe, ID ou outro estado.

Normalmente, quando um valor de propriedade CSS é alterado - quando ocorre um evento de alteração de estilo - a alteração é instantânea. O novo valor da propriedade substitui a propriedade antiga nos milissegundos que leva para repintar a página (ou para refluir e repintar, quando necessário). A maioria das alterações de valor parece instantânea, levando menos de 16 milissegundos para renderizar. Mesmo que as alterações demorem mais tempo do que isso (como quando uma imagem grande é substituída por uma que não é pré-fixada - o que não é uma transição, apenas um mau desempenho), continua a ser um único passo de um valor para o seguinte. Por exemplo, ao alterar uma cor de fundo ao passar o rato, o fundo muda imediatamente de uma cor para a outra, sem transição gradual.

Transições CSS

As transições CSS fornecem uma forma de controlar a forma como uma propriedade muda de um valor para o outro durante um período de tempo. Assim, podemos fazer com que os valores das propriedades mudem gradualmente, ...