CSS3 Efeito de transição

CSS3A funcionalidade de transição permite que as mudanças no valor dos atributos CSS ocorram suavemente ao longo do tempo especificado.

Entender CSS3Transição

Normalmente, quando o valor de um atributo CSS muda, o resultado da apresentação é atualizado imediatamente. Um exemplo comum é alterar a cor de fundo do botão ao passar o mouse sobre ele. Normalmente, quando o cursor é colocado sobre o botão, a cor de fundo do botão muda imediatamente do valor antigo para o novo.

CSS3introduziu uma nova funcionalidade de transição que permite animar suavemente os atributos do valor antigo para o novo ao longo do tempo.

Os seguintes exemplos mostrarão comobackground-corAnimação em tempo de sobreposição do botão HTML com o mouse.

button　{
　　　　background:　#fd7c2a;
　　　　/*　Para Safari　3.0+　*/
　　　　-webkit-transition-property: background;
　　　　-webkit-transition-duration:　2s;
　　　　
　　　　transition-property: background;
　　　　transition-duration:　2s;
}
button:hover　{
　　　　background:　#3cc16e;
}

Você deve especificar pelo menos dois atributos transition-property e transition-duration (maior que 0), para que eles produam efeitos de transição. Mas, todos os outrosPropriedades de Transiçãosão opcionais, pois seus valores padrão não impedem a ocorrência da transição.

Executar várias transições

Cada atributo de transição pode ter vários valores e são separados por vírgula, isso oferece uma maneira fácil de definir várias transições com diferentes configurações em uma única definição.

button　{
　　　　background:　#fd7c2a;
　　　　border:　3px solid #dc5801;
　　　　/*　Para Safari　3.0+　*/
　　　　-webkit-transition-property: background, border;
　　　　-webkit-transition-duration:　1s,　2s;
　　　　
　　　　transition-property: background, border;
　　　　transition-duration:　1s,　2s;
}
button:hover　{
　　　　background:　#3cc16e;
　　　　borda-cor:　#288049;
}

Atributo abreviado de transição

Existem muitos atributos a considerar ao aplicar transições. No entanto, também é possível especificar todas as propriedades de transição em um único atributo para reduzir o código.

As propriedades de transição são um atributo abreviado que permite definir todas as propriedades de transição individuais (ou seja, o atributo abreviado transition-property, transition-duration, transition-timing-function e transition-delay na ordem listada).

Ao usar essa propriedade, certifique-se de seguir essa ordem de valores.

button　{
　　　　background:　#fd7c2a;
　　　　-webkit-transition:　background　2s　ease-in　0s;　/*　Para Safari　3.0+　*/
　　　　transition:　background　2s　ease-in　0s;　
}
button:hover　{
　　　　background:　#3cc16e;
}

CSS3Propriedades de Transição

A tabela a seguir resume brevemente todas as propriedades de transição: