CSS - Propriedade 'transition'

Fala galera. Eu como um amante de CSS, onde tudo que sei sobre esta fantástica linguagem de estruturação de páginas web foi "autodidaticamente" rsrs...
Venho por este tutorial apresentar-lhes a propriedade transition. Primeiro vamos conhecer um pouco da história:

Durante muito tempo o CSS só serviu para pintar quadradinhos e mais nada. Desde quando o
pessoal do WaSP organizou todo o movimento dos Padrões Web fazendo com que todos os desenvolvedores, fabricantes de browsers e até mesmo o W3C acreditassem no poder dos padrões não
houve grandes atualizações no CSS. Praticamente formatávamos font, background, cor, tamanhos
e medidas de distância e posição.

A propriedade transition, a regra keyframe e outras propriedades vieram vitaminar a função que
o CSS tem perante o HTML acrescentando maneiras de produzirmos animações e transições. Não
estou dizendo que você fará animações complicadas, com diversos detalhes técnicos e etc. Para
esse tipo de resultado existem outras ferramentas, incluindo Canvas e SVG, que com certeza farão
um trabalho melhor com menos esforço. Mas é fato que as animações via CSS nos ajudará a levar a
experiência do usuário para outro patamar.

Lembrando que o nível de suporte de algumas dessas técnicas ainda é muito baixo. A propriedade
transition funciona em boa parte dos browsers atuais. Mas a regra keyframe que nos permite controlar as fases de uma animação ainda é muito restrito. Para uma tabela mais atual e detalhada de
suporte e compatibilidade, faça uma procura no Google. Onde for possível demonstrarei o código
com o prefixo dos browsers que suportam as propriedades.

O básico

A propriedade transition é super simples em sua sintaxe, nem precisa muito de explicações:

a{
    color:white;
    background: gray;
}

No código definimos que o link terá sua cor de texto igual a preta e seu background será cinza.

O resultado esperado é que ao passar o mouse no link a cor do texto seja modificada, mudando do
branco para o preto e que a cor de background mude de cinza para vermelho. O código abaixo faz
exatamente isso:

a{
    color:white;
    background: gray;
}
a:hover{
    color: black;
    background: red;
}

O problema é que a transição é muito brusca. O browser apenas modifica as características entre os
dois blocos e pronto. Não há nenhuma transição suave entre os dois estados.

Podemos fazer a mudança de um estado para outro utilizando a propriedade transition. Suponha
que ao passar o mouse, as mudanças acontecessem em um intervalo de meio segundo. Bastaria
colocar a propriedade transition no a:hover e pronto. Ao passar o mouse, o browser modificaria as
características do link com uma pequena transição de meio segundo. O código seria como se segue:

a:hover{
    color: black;
    background: red;
    -webkit-transition: 0.5s;
}

Dessa forma a transição apenas acontece quando o hover é ativado. O problema é que ao tirar o
mouse, o browser volta bruscamente para as características iniciais. Para modificar isso basta inserir também a propriedade transition no estado inicial.

a {
    color: white;
    background: gray;
    -webkit-transition: 0.5s;
}
a:hover {
    color: black;
    background: red;
    -webkit-transition: 0.5s;
} 

O que a propriedade transition faz é comparar os valores das propriedades em comum entre os dois
estados do link ou de qualquer outro elemento, assim ela modifica suavemente os valores quando
há a ativação da função. Esta é uma técnica simples e que serve para manipularmos transições bá-
sicas como cor, tamanho, posição etc.

Agora suponha que em um bloco há uma determinada propriedade que no outro bloco não há, como no código abaixo:

a {
    border:1px solid orange;
    color: white;
    background: gray;
    -webkit-transition: 0.5s;
}
a:hover {
    color: black;
    background: red;
    -webkit-transition: 0.5s;
}

Nesse caso o browser detecta que há uma propriedade no primeiro estado, mas não no segundo,
por isso ele não faz a transição desta propriedade, apenas das propriedades em comuns.

Veja um código completo em HTML, copie em um arquivo e veja o resultado:

<!DOCTYPE html>
<html lang=”pt-br”>
<head>
<meta charset=”utf-8”>
<title>CSS Transition</title>
<style type=”text/css” media=”screen”>
a {
   color:white;
background:gray;
-webkit-transition: 0.5s linear;
}
a:hover {
   color:black;
background:red;
-webkit-transition: 0.5s linear;
}
</style>
</head>
<body>
<a href=”#”>Link! Hello World!</a>
</body>
</html> 

Espero ter tirado algumas dúvidas ok??

Abraço a todos, siga-me no Twitter: @junim_ramos

Este tutorial foi baseado no curso de CSS do W3C