Como fazer transições com CSS3 - dummies

Fale sobre novos recursos poderosos em folhas de estilo em cascata (CSS): Ao emparelhar: 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!

A propriedade de transição realmente possui quatro configurações, que devem ser escritas no CSS na seguinte ordem: propriedade, duração, função de temporização, atraso.

A seguinte lista descreve as configurações:

• transition-property: Identifica qual propriedade CSS irá alterar, como largura ou altura, como em transição-propriedade: largura;.

• duração de transição: define o valor em segundos para a transição para completar, como em duração de transição: 5s;.

• função de transição-temporização: Especifica a curva de velocidade do efeito. Os valores podem ser definidos como lineares, facilidade, facilidade, facilidade de saída, facilidade de entrada, ou bezier cúbico ( n , n , n >, n ), como neste exemplo: transição-timing-function: linear;, o que equivale ao beicultão cúbico (0, 0, 1, 1).

  atraso de transição: Determina quantos segundos se decorrerão antes do início do efeito, como no período de transição: 2s;.

• No exemplo de código a seguir, após um atraso de 2 segundos, uma caixa laranja muda suavemente em 5 segundos de 100px para 500px de largura quando um visitante passa o mouse sobre o recipiente:

div {width: 100px; altura: 100px; cor de fundo: # F90; transição: largura 5s linear 2s; -moz-transition: largura 5s linear 2s; / * Firefox 4 * / -webkit-transition: largura 5s linear 2s; / * Safari & Chrome * / -o-transition: largura 5s linear 2s; / * Opera * /} div: hover {width: 500px;}