Transição CSS: como usar a propriedade transition passo a passo

Com a chegada do CSS3 apareceram muitas funcionalidades novas para criar efeitos bonitos, e uma das mais úteis é a propriedade de transição.

A propriedade de transição é um módulo do CSS3. Serve para criar um efeito de mudança dinâmica numa tag HTML ou numa classe, com uma escrita simples:

transition: property duration timing-function delay;

A transição do CSS3 é uma excelente forma de acrescentar uma pequena animação aos sites sem uma linha de javascript. Antes de começares, podes ver um tutorial de css que fiz e que tira partido desta propriedade:
Tutorial – Criar um cartão em CSS

Propriedade

Primeiro, para que a propriedade de transição funcione, é preciso definir a propriedade normal a que ela se vai aplicar. No nosso exemplo, vamos acrescentar uma transição a um background-color. Para escrever a propriedade sozinha, basta:

transition-property: background-color;

Transição

Depois, uma vez definida a propriedade, faltam os valores inicial e final. No nosso caso, é preciso uma cor de partida e um valor de chegada associado a outra condição.
Por exemplo, aqui definimos a propriedade de transição sobre background-color, depois o valor inicial de background-color no elemento #element e, por fim, o valor final para quando o utilizador passa o rato por cima, com #element:hover:

#element {
    transition-property:background-color;
    background-color:red;
}
#element:hover {
    background-color:blue;
}

Duração da animação

Agora que já temos a propriedade a transformar com os valores inicial e final, falta definir a duração da transição. Faz-se indicando um tempo em segundos ou em milissegundos, assim:

#element {
    transition-property:background-color;
    transition-duration: 0.2s;
    background-color:red;
}
#element:hover {
    background-color:blue;
}

Isto quer dizer que a div #element muda de background-color ao longo de 200 milissegundos (0,2 segundos)

A propriedade transition-timing-function

Este código já chega para criar uma transição, mas podemos ir mais longe com a propriedade transition-timing-function, que altera a forma como o efeito decorre. Por omissão, a transição usa a curva ease. Podes, no entanto, escolher outros efeitos nativos ou usar uma curva de Bézier para desenhares o teu.

transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: linear;
transition-timing-function: step-start;
transition-timing-function: step-end;

transition-timing-function: cubic-bezier(0.1, 0.5, 1.0, 0.1);

É isto que dá no nosso exemplo:

#element {
    transition-property:background-color;
    transition-duration: 0.2s;
    transition-timing-function:ease-in-out;
    background-color:red;
}
#element:hover {
    background-color:blue;
}

Atrasar a transição

Além disso, tal como a duração, a propriedade transition-delay permite atrasar o arranque do efeito de transição.

transition-delay: 1s;

#element {
    transition-property:background-color;
    transition-duration: 0.2s;
    transition-timing-function:ease-in-out;
    transition-delay: 1s;
    background-color:red;
}
#element:hover {
    background-color:blue;
}

···