Como fazer transições com css3
Video: Como fazer um site usando somente HTML5 e CSS3
Conteúdo
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 realmente 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 -transição duração: 5S-.
Video: MUSICALLY ANDROID - COMO FAZER TRANSIÇÃO SEM ATRASAR �� ARIANE OSAKI
-transição de temporização-funçãoEspecifica a curva de velocidade do efeito. Os valores podem ser definidos para linear, facilidade, aliviar-in, facilidade-out, aliviar-in-out, ou cúbicas de Bezier (n,n,n,n), como neste exemplo: -transição de temporização-função: linear-, o qual é equivalente a cúbicas de Bezier (0,0,1,1).
-transição atraso: Determina quantos segundos irá decorrer antes o efeito começa, como em -transição atraso: 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 a partir de 100 p a 500 pixels de largura quando um visitante paira o rato sobre o recipiente: