Las transiciones CSS3
transiciones CSS3 le permite cambiar los valores de propiedad sin problemas (de un valor a otro), durante un periodo determinado.
Ejemplo: el ratón sobre el elemento de abajo para ver un efecto de transición CSS3:
Soporte para el navegador de transiciones
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Los números seguidos por -webkit-, -moz- , o -o- especifican la primera versión que funcionaba con un prefijo.
| Propiedad | |||||
|---|---|---|---|---|---|
| transition | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
| transition-delay | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
| transition-duration | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
| transition-property | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
| transition-timing-function | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
Cómo utilizar CSS3 Transitions?
Para crear un efecto de transición, debe especificar dos cosas:
- la propiedad CSS que desea añadir un efecto a
- la duración del efecto
Nota: Si no se especifica la parte de la duración, la transición no tendrá ningún efecto, ya que el valor por defecto es 0.
El siguiente ejemplo muestra un 100px * 100px rojo <div> elemento. La <div> elemento 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;
-webkit-transition: width 2s; /* Safari */
transition: width 2s;
}
El efecto de transición se iniciará cuando la propiedad CSS especificado (ancho) cambia de valor.
Ahora, vamos a especificar un nuevo valor para la propiedad de ancho cuando se coloca el ratón sobre el <div> elemento:
Cabe destacar que cuando los ratones cursor fuera del elemento, que van poco a poco cambiar de nuevo a su estilo original.
Varios cambiar los valores de propiedad
El siguiente ejemplo añade un efecto de transición para la anchura y la altura de la propiedad, con una duración de 2 segundos para el ancho y 4 segundos para la altura:
Ejemplo
div
{
-webkit-transition: width 2s, height 4s; /*
Safari */
transition: width 2s, height 4s;
}
Inténtalo tú mismo " Especificar la curva de velocidad de la Transición
El transition-timing-function propiedad especifica la curva de velocidad del efecto de transición.
La propiedad-tiempo-función de transición puede tener los siguientes valores:
-
ease- especifica un efecto de transición con un comienzo lento, luego rápido, y luego terminar lentamente (esto es por defecto) -
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 extremo lenta -
ease-in-out- especifica un efecto de transición con un lento comienzo y el final -
cubic-bezier(n,n,n,n)- le permite definir sus propios valores en un cubic-bezier función
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;} Inténtalo tú mismo " Retrasar el efecto de transición
La transition-delay propiedad especifica un retraso (en segundos) para el efecto de transición.
El siguiente ejemplo tiene un retardo de 1 segundo antes de partida:
Ejemplo
div {
-webkit-transition-delay: 1s; /* Safari */
transition-delay: 1s;
} Inténtalo tú mismo " Transición + Transformación
El siguiente ejemplo se añade también una transformación en el sentido de la transición:
Ejemplo
div {
-webkit-transition: width 2s, height
2s, -webkit-transform 2s; /* Safari */
transition:
width 2s, height 2s, transform 2s;
} Inténtalo tú mismo " Más ejemplos de Transición
Las propiedades de transición CSS3 se pueden especificar uno a uno, de esta manera:
Ejemplo
div
{
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
Inténtalo tú mismo " o mediante el uso de la propiedad rápida transition :
Ponte a prueba con los ejercicios!
Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4» Ejercicio 5 »
Propiedades CSS 3 Transición
La siguiente tabla muestra todas las propiedades de transición:
| Propiedad | Descripción |
|---|---|
| transition | Una propiedad abreviada para establecer las cuatro propiedades de transición en una sola propiedad |
| transition-delay | Especifica un retraso (en segundos) para el efecto de transición |
| transition-duration | Especifica cuántos segundos o milisegundos un efecto de transición necesario para completar |
| transition-property | Especifica el nombre de la propiedad CSS es el efecto de transición para |
| transition-timing-function | Especifica la curva de velocidad del efecto de transición |