Transiciones CSS

Las transiciones CSS permiten cambiar los valores de las propiedades suavemente de un valor a otro, durante una valor de duración dado.

¿Cómo usar las transiciones CSS?

Para crear un efecto de transición, se debe especificar dos cosas:

  • La propiedad CSS que se le va agregar un efecto.
  • La duración de el efecto.

Si la duración no es especificada, la transición no tendrá efecto dado que el valor predeterminado es 0. En el siguiente ejemplo muestra un elemento <div> de 100px por 100px, con un efecto de transición para la propiedad width:

div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* Safari */
transition: width 2s;
}

El efecto de transición iniciará cuando la propiedad CSS especificada cambie de valor, en este caso, la propiedad width. Posteriormente, especificamos un nuevo valor para la propiedad width para que se active cuando el usuario posicione el cursor del mouse sobre el elemento <div>:

div:hover {
width: 300px;
}

Una vez que el cursor del mouse salga del elemento <div>, cambiara gradualmente a su estilo original.

Cambiar varios valores de propiedad

En el siguiente ejemplo se agrega el efecto de transición para tanto la propiedad width con una duración de 2 segundos como para la propiedad height con una duración de 4 segundos:

div {
-webkit-transition: width 2s, height 4s; /* Safari */
transition: width 2s, height 4s;
}

Especificar la curva de velocidad de la transición

La propiedad transition-timing-function especifica la curva de velocidad del efecto de transición y puede tener los siguientes valores:

  • ease : Especifica un efecto de transición con un inicio lento, después rápido, y al final de nuevo lento. Esto es predeterminado.
  • linear : Especifica un efecto de transición con la misma velocidad de inicio a fin.
  • ease-in : Especifica un efecto de transición con un inicio lento.
  • ease-out : Especifica un efecto de transición con un final lento.
  • ease-in-out : Especifica un efecto de transición con un inicio y final lento.
  • cubic-bezier(n,n,n,n) : Permite definir los valores propios en una función cubic-bezier.

En el siguiente ejemplo se muestran algunas de las diferentes curvas de velocidad, que se pueden usar:

#div1 {
transition-timing-function: linear;
}
#div2 {
transition-timing-function: ease;
}
#div3 {
transition-timing-function: ease-in;
}
#div4 {
transition-timing-function: ease-out;
}
#div5 {
transition-timing-function: ease-in-out;
}

Retrasar el efecto de transición

La propiedad transition-delay especifica un retraso en segundos el efecto de transición. En el siguiente ejemplo se especifica 1 segundo de retraso antes de iniciar:

div {
-webkit-transition-delay: 1s; /* Safari */
transition-delay: 1s;
}

Transición más transformación

En el siguiente ejemplo también se agrega una transformación a el efecto de transición:

div {
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
transition: width 2s, height 2s, transform 2s;
}

Más ejemplos de transición

Las propiedades de transición CSS pueden ser especificada una por una, como se muestra a continuación:

div {
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}

O también usando la propiedad transition de escritura simplificada:

div {
transition: width 2s linear 1s;
}

Las Propiedades de Transición CSS

En la siguiente tabla se listan las propiedades de transición CSS:

Propiedad Descripción
transition Propiedad de escritura simplificada para especificar las cuatro propiedades de transición en una sola propiedad.
transition-delay Propiedad para especificar un retraso en segundos para el efecto de transición.
transition-duration Propiedad para especificar cuantos segundos o milisegundos toma en completarse un efecto de transición.
transition-property Propiedad para especificar el nombre de la propiedad al cual se aplica el efecto de transicón.
transition-timing-function Propiedad para especificar la curva de velocidad de un efecto de transición.