Transiciones CSS
Transiciones CSS
Las transiciones de CSS le permiten cambiar los valores de propiedad sin problemas, durante un período determinado.
Pase el mouse sobre el elemento a continuación para ver un efecto de transición CSS:
En este capítulo aprenderá acerca de las siguientes propiedades:
transitiontransition-delaytransition-durationtransition-propertytransition-timing-function
Soporte de navegador para transiciones
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
| Property | |||||
|---|---|---|---|---|---|
| transition | 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 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;
}
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;
}
Especificar la curva de velocidad de la transición
La transition-timing-functionpropiedad 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 finease-in- especifica un efecto de transición con un comienzo lentoease-out- especifica un efecto de transición con un final lentoease-in-out- especifica un efecto de transición con un comienzo y un final lentoscubic-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;}
Retrasar el efecto de transición
La transition-delaypropiedad 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;
}
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;
}
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;
}
o usando la propiedad abreviada transition:
Ejemplo
div
{
transition: width 2s linear 1s;
}
Propiedades de transición CSS
La siguiente tabla enumera todas las propiedades de transición de CSS:
| Property | Description |
|---|---|
| transition | A shorthand property for setting the four transition properties into a single property |
| transition-delay | Specifies a delay (in seconds) for the transition effect |
| transition-duration | Specifies how many seconds or milliseconds a transition effect takes to complete |
| transition-property | Specifies the name of the CSS property the transition effect is for |
| transition-timing-function | Specifies the speed curve of the transition effect |