Transições

Podemos adicionar uma transição de tempo em uma modificação por um determinado elemento. Adicionamos ao elemento a seguinte propriedade:

.elemento {
    transition: <property> <duration>;
}

Um exemplo prático: Queremos modificar a cor de um elemento quando o usuário posicionar o cursor sobre ele.

/* Adicionando uma modificação */
.elemento:hover {
      background-color: tomato;
}

Mas queremos que essa mudança aconteça de forma suave. Então adicionamos uma transição, com a propriedade modificada e a duração que queremos, 1 segundo, por exemplo:

/* Adicionando transição */
.elemento {
     transition: background-color 1s;
}

More transitions

É possível adicionar também mais propriedades em uma mesma transição separando-as por vírgulas, e dar a elas o mesmo tempo de duração, ou não, exemplo:

/* Adicionando mais transições */
.elemento {
    transition:
        background-color 1s,
        height 1s,
        width 1s,
        opacity 1s;
}

/* Adicionando mais modificações */
.elemento:hover {
    background-color: green;
    height: 70px;
    width: 70px;
    opacity: 0;
}