Transiciones

Una transición es el pasaje del valor de la propiedad de un elemento a un nuevo valor.
Con CSS podemos definir cómo se realiza esa transición, cuánto demora en realizarse, si se produce con delay, etc.

Se usa mucho en conjunto con la pseudo clase :hover. Primero definimos que propiedad queremos
que transicione y cómo lo hará, y cuando el elemento se encuentra con el estado hover, le asignamos a
dicha propiedad el nuevo valor que queremos que tenga.

transition-property

Nos permite definir que propiedades queremos que vayan a transicionar, separadas por coma en caso de que sean varias:

.example-1 {
 transition-property: background-color, width;
}

También podemos usar transition-property: all para transicionar todas
las propiedades que modifiquemos.

transition-duration

Nos permite definir la duración de la transición en segundos. Si hemos definido varias propiedades diferentes a transicionar,
podemos asignar duraciones distintas a cada transición, separándolas por coma, en el orden en que las hemos declarado:

.box {
 width: 150px;
 background-color: crimson;
 transition-property: background-color, width;
 transition-duration: 2s, 0.5s;
}
.box:hover {
 background-color: goldenrod;
 width: 200px;
}

En este caso, el background-color tarda mucho más que
width en transicionar.

transition-timing-function

Nos permite definir la función de tiempo con la que transicionará la propiedad. Si hemos definido varias propiedades diferentes a transicionar,
podemos asignar funciones distintas a cada transición, separándolas por coma, en el orden en que las hemos declarado:

.box {
 left: 0px;
 transition-property: left;
 transition-duration: 2s;
 transition-timing-function: ease;
}
.box:hover {
 left: 490px;
}

Una función de tiempo es una función que indica qué velocidad va a tener la transición a cada momento,
permitiendo que varíe su velocidad a lo largo de su duración.

Se definen a través de lo que se llaman "curvas de bezier". Podemos generar nuestra propia curva de bezier,
a partir de cuatro valores.

.box{
 transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
}

transition-delay

Nos permite definir el delay, o retraso, con el que se iniciará la transición. Si hemos definido varias propiedades diferentes a transicionar,
podemos asignar funciones distintas a cada transición, separándolas por coma, en el orden en que las hemos declarado:

.box {
 left: 0px;
 transition-property: left;
 transition-duration: 2s;
 transition-timing-function: ease;
 transition-delay: 0.2s;
}
.box:hover {
 left: 490px;
}

transition

Es la forma de abreviar y reunir en una sola propiedad todas las propiedades anteriores. Su sintaxis es:

transition: ([transition-property]) [transition-duration]
([transition-timing-function]) ([transition-delay]);

Las que están entre paréntesis son opcionales y se resuelven en valores default (all, ease, 0s) si no se definen.
También podemos especificar transiciones diferentes para propiedades distintas, separándolas por coma:

.box {
 left: 0px;
 background-color: burlywood;
 border-radius: 0;
 transition: left 1.5s ease 0.2s,
  background-color 1s ease-in-out,
  border-radius 1s ease-in 0.5s;
}
.box:hover {
 left: 490px;
 background-color: brown;
 border-radius: 50%;
}

Demos

Un par de ejemplos de cosas que se pueden hacer con transiciones