¿Qué son las transiciones?

Las transiciones CSS son un tipo de animación muy simple, donde se establecen la forma en la que va a cambiar una o varias propiedades de CSS. Por defecto, en CSS los cambios se producen de forma inmediata y abrupta, por lo que, por ejemplo, un cambio de color a otro se cambiaría de forma instantánea. Utilizando transiciones de CSS podríamos suavizar los cambios, de modo que se verían poco a poco, de forma más sutil.

Por lo general, estas transiciones suelen producirse cuando el usuario realiza una cierta acción. En estos primeros tutoriales utilizaremos una de las acciones más básicas: cuando el usuario mueve el ratón sobre un elemento, utilizando el selector (pseudoclase) :hover.

Estados y transiciones

Denominaremos estado a la situación en la que se encuentra un elemento. Así, por ejemplo, el estado inicial del elemento podría ser tener un color rojo, mientras que el estado final (al mover el ratón sobre el elemento) es tener un color azul.

Mueve el ratón encima del elemento para ver un cambio de estado sin transición:

.element {
  width: 100px;
  height: 100px;
  background: red;
}

.element:hover {
  background: blue;
}

<div class="element"></div>

Como hemos mencionado, estos estados por defecto cambian de golpe (instantáneamente), pero si añadimos transiciones, suavizamos el cambio y lo hacemos más gradual.

Las transiciones son los cambios de un estado a otro. En este primer tema veremos las transiciones, por lo que sólo vamos de un estado a otro, pero más adelante, veremos que existen animaciones que permiten tener múltiples estados.

Mueve el ratón encima del elemento para ver un cambio de estado con transición (de 2 segundos):

.element {
  width: 100px;
  height: 100px;
  background: red;
  transition: 2s;
}

.element:hover {
  background: blue;
}

<div class="element"></div>

Como puedes ver, en este caso el cambio de estilo (la transición) ha sido gradual y más suave. Más adelante explicaremos el código y los detalles técnicos, pero primero aprendamos los conceptos.

Transición de entrada y salida

Es interesante tener en cuenta que hay dos tipos de transiciones: de entrada y de salida. Las transiciones de entrada se aplican cuando el estado inicial cambia al estado final (se produce la condición: el ratón encima del elemento), mientras que las transiciones de salida se aplican cuando se deja de cumplir dicha condición (se quita el ratón encima del elemento), volviendo a su estado inicial:

Aprovechando los selectores CSS, podemos hacer transiciones de entrada y salida diferentes. Por lo general, la transición CSS se coloca en el elemento (como hicimos en el ejemplo anterior). En ese caso, aplicaría siempre.

Transición de entrada

Sin embargo, hay que tener en cuenta que en su lugar, también es posible añadirla en el bloque .element:hover. De esta forma, la transición sólo se aplica cuando el usuario tiene el ratón encima del elemento, por lo que sólo ocurriría en la transición de entrada:

.element {
  width: 100px;
  height: 100px;
  background: red;
}

.element:hover {
  background: blue;
  transition: 2s;
}

<div class="element"></div>

La transición del ejemplo anterior se aplica sólo al mover el ratón sobre el elemento (transición de entrada). Si movemos el ratón fuera del enlace, no se produce transición, sino que realiza el cambio de forma brusca.

Esto ocurre porque le estamos diciendo que solo realice la transición cuando tenemos el ratón encima (:hover), en caso contrario no lo hará porque no hay definidas propiedades de transición.

Transición de salida

Por otro lado, utilizando :not(:hover) podemos invertir la situación y conseguir que sólo se aplique la transición de salida, ya que sólo entrará en efecto cuando el usuario no tenga el ratón encima del elemento:

.element {
  width: 100px;
  height: 100px;
  background: red;
}

.element:not(:hover) {
  background: blue;
  transition: 2s;
}

<div class="element"></div>

También es posible combinar diferentes transiciones utilizando la Cascada de CSS. Si indicamos una transición en el elemento y otra diferente en el :hover, podremos conseguir (por ejemplo) duraciones diferentes:

.element {
  width: 100px;
  height: 100px;
  background: red;
  transition: 4s;
}

.element:hover {
  background: blue;
  transition: 1s;
}

<div class="element"></div>

En este caso, observa que la transición de entrada inicial es muy rápida (1 segundo). Sin embargo, cuando quitamos el ratón, se producirá la transición de salida (4 segundos).

¡Recuerda siempre tener cuidado con la herencia, cascada y especificidad!

Transiciones por propiedad

Es posible que queramos indicar (por ejemplo) diferentes duraciones dependiendo de la propiedad CSS. Por ejemplo, que tarde mucho en cambiar el ancho del elemento, pero muy poco en cambiar el color de fondo.

Para ello, podemos separar con comas las diferentes propiedades que queremos transicionar:

.element {
  width: 200px;
  height: 200px;
  background: grey;
  transition:
    width 4s,
    background 1s;
}

.element:hover {
  width: 400px;
  background: deeppink;
}

<div class="element"></div>

Observa que en este caso, la transición de ancho (propiedad width de CSS) tardará 4 segundos en cambiar, mientras que la transición del color de fondo (propiedad background de CSS) tardará muy poco, sólo 1s.

En este artículo hemos simplificado mucho las transiciones para explicarlas sin contexto técnico. Sin embargo, merece la pena leer el siguiente artículo para aprender a utilizarlas bien, sin omitir detalles.

Desencadenante de la transición

En estos ejemplos hemos utilizado :hover como desencadenante de la transición CSS porque es muy sencillo de visualizar en los ejemplos. Sin embargo, existen muchísimas formas que podemos utilizar para desencadenar una transición:

En general, se puede utilizar con cualquier pseudoclase CSS de interacción, pero también podemos utilizarla al añadir clases, por ejemplo, usando un poquito de Javascript:

body {
  background: #141414;
}

.element {
  width: 200px;
  height: 200px;
  background: grey;
  transition: all 2s;
}

.light {
  background: gold;
  box-shadow: 0 0 25px gold;
}

const element = document.querySelector(".element");
element.addEventListener("click", () => element.classList.toggle("light"));

<div class="element"></div>

En este caso, mediante Javascript estamos utilizando un evento click para añadir o quitar la clase light mediante un .toggle() de clases HTML.

Si quieres ver un ejemplo real de uso de transiciones, en el siguiente video explico como hacer la animación de la cabecera de Manz.dev utilizando transiciones: