Já é possível alterar as propriedades CSS na mosca através de pseudo-classes (como pairar) ou com o código de javascript. Antes de CSS3, todas as mudanças de estado CSS aconteceu instantaneamente. Com o novo transição atributo, você pode causar transições para acontecer ao longo do tempo.

Olhar para um simples título h1:

transição de demonstração

O código CSS é principalmente bastante simples:

 h1 {color: black font-size: 300% - de transição: 1s cor aliviar-in-} h1: hover {color: red-}

Comece por ignorar o transição atributo. Se você olhar para o resto do código, é fácil ver o que ele faz. No estado normal, a posição é preto. No estado de foco, a cor é vermelha. Normalmente, o título passa a vermelho assim que o mouse passa sobre ele, e irá imediatamente ficar preta quando as folhas do mouse.

No entanto, quando o transição atributo é adicionado, a mudança de cor não é imediato, mas é necessário um segundo. A cor muda gradualmente de preto para vermelho e vice-versa.

As transições são ainda mais interessante quando você emparelhá-los com transformações. Imagine uma muito simples div:

box 1

Aplique um pouco de magia CSS3 e quando o usuário passa o mouse sobre o div, ele gira suavemente até que esteja de cabeça para baixo. Quando o usuário sai do div, -lo sem problemas gira de volta para sua posição original:

 #box {transição: todos os 1s aliviar-in-height: 100px; width: 100px; border: 1px solid negro} #box: hover {transform: rotate (180 °) -}

o transformar é definida na: flutuar pseudo-classe. O único elemento novo é a transição especificado no estilo padrão da classe ".

o transição atributo leva vários parâmetros:

• propriedade de animação: O tipo de animação definido por este tag. O valor padrão é todos, mas outros tipos são esperados para o trabalho, incluindo cor, comprimento, largura, pecentage, opacidade, e número. Em caso de dúvida, use o padrão todos.

• duração: O comprimento da animação em segundos. Um segundo é 1s.

• função de temporização: Se você deseja que a animação para ocorrer a uma velocidade constante, use. Se você quiser um movimento mais natural que gradualmente acelera e desacelera nas extremidades da animação, use um dos seguintes procedimentos: facilidade, facilidade-dentro, ease-out, aliviar-in-out.

• demora: Se você incluir um segundo valor de tempo, isso vai ser considerado um atraso. A animação não começará até depois do intervalo.

Se preferir, você pode usar as propriedades individuais para as várias partes da animação, mas a maioria desenvolvedor prefere o atalho de uma linha (como o usado para as fronteiras).

Nem todos os atributos CSS pode ser animado, mas muitos podem ser. Ela pode exigir alguma experimentação para determinar quais atributos CSS pode ser animado com o transição atributo.

Infelizmente, o estoque transição atributo não é suportado por todos os principais navegadores, mas existem versões específicas de cada fornecedor para Mozilla (-moz-), O WebKit (-webkit) E Opera (-o-). Sua melhor aposta até que o suporte é generalizada é a de incluir todas as versões específicas de cada fornecedor, além da versão padrão.