CSS Transitions

---

Transiciones CSS

Las transiciones de CSS le permiten cambiar los valores de propiedad sin problemas, durante un período determinado.

En este capítulo aprenderás acerca de las siguientes propiedades:

• transition

• transition-delay

• transition-duration

• transition-property

• transition-timing-function

---

Soporte del navegador para transiciones

Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.

---

¿Cómo usar las transiciones CSS?

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

• La propiedad CSS a la que desea agregar un efecto

• La duración del efecto

Nota: Si no se especifica la parte de duración, la transición no tendrá efecto, porque el valor predeterminado es 0.

El siguiente ejemplo muestra un elemento rojo <div> de 100px * 100px. El elemento <div> también ha especificado un efecto de transición para la propiedad de ancho, con una duración de 2 segundos:

Ejemplo:

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

El efecto de transición comenzará cuando la propiedad CSS especificada (ancho) cambie de valor.

Ahora, especifiquemos un nuevo valor para la propiedad de ancho cuando un usuario pasa el mouse sobre el elemento <div>:

Ejemplo:

div:hover {
  width: 300px;
}

Ver ejemplo

Tenga en cuenta que cuando el cursor se aleja del elemento, volverá gradualmente a su estilo original.

---

Cambiar varios valores de propiedad

El siguiente ejemplo agrega un efecto de transición para la propiedad ancho y alto, con una duración de 2 segundos para el ancho y 4 segundos para el alto:

Ejemplo:

div {
  transition: width 2s, height 4s;
}

Ver ejemplo

---

Especificar la curva de velocidad de la transición

La propiedad transition-timing-function especifica la curva de velocidad del efecto de transición.

La propiedad transition-timing-function puede tener los siguientes valores:

• ease - Especifica un efecto de transición con un comienzo lento, luego rápido, luego termina lentamente (esto es predeterminado)

• linear - Especifica un efecto de transición con la misma velocidad de principio a fin

• ease-in - Especifica un efecto de transición con un comienzo lento

• ease-out - Especifica un efecto de transición con un final lento

• ease-in-out - Especifica un efecto de transición con un comienzo y un final lentos

• cubic-bezier(n,n,n,n) - le permite definir sus propios valores en una función cubic-bezier

El siguiente ejemplo muestra algunas de las diferentes curvas de velocidad que se pueden utilizar:

Ejemplo:

#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;}

Ver ejemplo

---

Retrasar el efecto de transición

La propiedad transition-delay especifica un retraso (en segundos) para el efecto de transición.

El siguiente ejemplo tiene un retraso de 1 segundo antes de comenzar:

Ejemplo:

div {
  transition-delay: 1s;
}

Ver ejemplo

---

Transición + Transformación

El siguiente ejemplo agrega un efecto de transición a la transformación:

Ejemplo:

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

Ver ejemplo

---

Más ejemplos de transición

Las propiedades de transición CSS se pueden especificar una por una, así:

Ejemplo:

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

Ver ejemplo

o usando la propiedad abreviada transition:

Ejemplo:

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

Ver ejemplo

---

Propiedades de transición CSS

La siguiente tabla enumera todas las propiedades de transición de CSS:

---

Traducido con 💚 desde W3Schools.com