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óncubic-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. |