Transición CSS

Transición CSS

CSS Transitions le permite cambiar suavemente los valores de las propiedades en un período de tiempo dado.

Mueva el ratón sobre este elemento para ver el efecto de transición CSS:

CSS

En este capítulo, aprenderá lo siguiente:

  • transición
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function

Soporte del navegador para la transición

Los números en la tabla indican la versión del navegador que admite completamente la propiedad.

propiedades Chrome IE Firefox Safari Opera
transición 26.0 10.0 16.0 6.1 12.1
transition-delay 26.0 10.0 16.0 6.1 12.1
transition-duration 26.0 10.0 16.0 6.1 12.1
transition-property 26.0 10.0 16.0 6.1 12.1
transition-timing-function 26.0 10.0 16.0 6.1 12.1

¿Cómo usar CSS Transiciones?

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

  • La propiedad CSS a la que desea agregar el efecto
  • 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 <div> rojo de 100px * 100px. El elemento <div> también especifica un efecto de transición para la propiedad width, que dura 2 segundos:

ejemplo

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

Cuando cambia el valor de la propiedad CSS especificada (width), se iniciará el efecto de transición.

Ahora, asignemos un nuevo valor para la propiedad width cuando el ratón se suspenda sobre el elemento <div>:

ejemplo

div:hover {
  width: 300px;
}

Intente hacerlo usted mismo

Por favor, note que cuando el cursor se desplaza del elemento, gradualmente regresará a su estilo original.

Cambiar varios valores de propiedades

El siguiente ejemplo añade un efecto de transición a las propiedades width y height, width es de 2 segundos y height es de 4 segundos:

ejemplo

div {
  transition: ancho 2s, altura 4s;
}

Intente hacerlo usted mismo

Especificar la curva de velocidad de la transición

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

La propiedad transition-timing-function acepta los siguientes valores:

  • ease - Define un efecto de transición que comienza lentamente, luego se acelera y luego termina lentamente (por defecto)
  • lineal - Define un efecto de transición que tiene la misma velocidad desde el principio hasta el final
  • ease-in - Define un efecto de transición que comienza lentamente
  • ease-out - Define un efecto de transición que termina lentamente
  • ease-in-out - Define un efecto de transición que comienza y termina más lentamente
  • cubic-bezier(n,n,n,n) - Le permite definir sus propios valores en la función de bezier de tercer grado

Los siguientes ejemplos muestran algunos diferentes tipos de curvas de velocidad que se pueden utilizar:

ejemplo

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

Intente hacerlo usted mismo

Retrasar el efecto de transición

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

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

ejemplo

div {
  transition-delay: 1s;
}

Intente hacerlo usted mismo

Transición + Transformación

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

ejemplo

div {
  transition: ancho 2s, altura 2s, transformación 2s;
}

Intente hacerlo usted mismo

Más ejemplos de transición

Puede especificar todas las propiedades de transición CSS, como se muestra a continuación:

ejemplo

div {
  transition-property: ancho;
  transition-duration: 2s;
  transition-timing-function: lineal;
  transition-delay: 1s;
}

Intente hacerlo usted mismo

o utilice la abreviatura transición propiedad:

ejemplo

div {
  transition: ancho 2s lineal 1s;
}

Intente hacerlo usted mismo

Propiedades de transición CSS

A continuación se lista todas las propiedades de transición CSS:

propiedades descripción
transición Atributo abreviado que se utiliza para establecer una única propiedad para cuatro propiedades de transición.
transition-delay Define el retraso del efecto de transición (en segundos).
transition-duration Define cuánto tiempo o milisegundos debe durar el efecto de transición.
transition-property Define el nombre de la propiedad CSS que se aplica al efecto de transición.
transition-timing-function Define la curva de velocidad del efecto de transición.