Como fazer transições com CSS3
Falar sobre novos recursos poderosos nas folhas de estilo em cascata (CSS): Ao emparelhar o :flutuar pseudo-classe com a propriedade de transição CSS3, você pode adicionar recursos interativos lisos aos seus objetos sem o uso de Flash, javascript ou jQuery!
o transição propriedade, na verdade, tem quatro definições, que devem ser escritas no CSS na seguinte ordem: propriedade, duração, -Função de temporização, demora.
A lista a seguir descreve as configurações:
de transição de propriedade: identifica qual a propriedade CSS irá alterar, como o largura ou altura, como em de transição de propriedade: width-.
duração da transição: Define o valor em segundos para a transição para completar, como em de transição de duração: 5S.
transição-timing-functionEspecifica a curva de velocidade do efeito. Os valores podem ser configurados para linear, facilidade, ease-in, ease-out, aliviar-in-out, ou cúbico-bezier (n,n,n,n), como neste exemplo: transição-timing-function: linearidade, o que equivale a cúbico-bezier (0,0,1,1).
transition-delay: Determina quantos segundos irá decorrer antes o efeito começa, como em transition-delay: 2S-.
No exemplo de código a seguir, após um atraso de 2 segundos, uma caixa de laranja suavemente mudanças ao longo de 5 segundos de 100px para 500px de largura, quando um visitante passa o mouse sobre o recipiente: