Transiciones
Con transiciones de CSS3, podemos aplicar un efecto de animación al cambiar de un estilo a otro, sin el uso de Flash o JavaScript.
transition: propiedad duración función de temporizador ( opcional ) demora ( opcional );
transition representa la notación abreviada de cuatro propiedades:
propiedad ( transition-property )
Especifica la lista de propiedades (separadas por comas) que modificaran su valor durante la transición
duración (transition-duration)
Especifica el número de segundos (s) o milisegundos (ms) entre el comienzo y el fin de la transición.
función de temporizador ( transition-timing-function )
Parámetro opcional. Especifica como varia la velocidad durante la transición.
demora ( transition-delay )
Parámetro opcional. Especifica el número de segundos (s) o milisegundos (ms) antes de empezar la transición.
Propiedades y duración
Empezamos con un ejemplo fácil: al pasar por encima ( :hover
) del <div id="transicion">
el color de fondo ( background-color
) cambiará de rojo ( #ff0000
) a azul ( #0000ff
) en una transición ( transition
) de 3 segundos.
#transicion {
height: 100px;
width: 100px;
background-color: #ff0000;
-webkit-transition: background-color 3s;
transition: background-color 3s;
}
#transicion:hover {
background-color: #0000ff;
}
Si queremos que dos o más propiedades cambien durante la transición, separaremos las propiedades con una coma ( , ).
#propiedades {
height: 100px;
width: 100px;
background-color: #ff0000;
-webkit-transition: background-color 3s, border-radius 3s;
transition: background-color 3s, border-radius 3s;
}
#propiedades:hover {
background-color: #0000ff;
border-radius: 75px;
}
Podemos desglosar la propiedad transition
( abreviada ) del ejemplo anterior, utilizando las propiedades transition-property
y transition-duration
.
#desglosado {
height: 100px;
width: 100px;
background-color: #ff0000;
-webkit-transition-property: background-color, border-radius;
transition-property: background-color, border-radius;
-webkit-transition-duration: 3s, 3s;
transition-duration: 3s, 3s;
}
#desglosado:hover {
background-color: #0000ff;
border-radius: 75px;
}
Función de temporizador
( transition-timing-function )
La función de temporizador que especifica la curva de velocidad del efecto de transición, es un parámetro opcional y puede tomar los siguientes valores:linear
| ease
| ease-in
| ease-out
| ease-in-out
| cubic-bezier(n,n,n,n)
.
Si no especificada, la función de temporizador toma por defecto el valor de linear
.
linear:
el efecto de transición pasa con la misma velocidad de principio a fin (equivalente a: cubic-bezier(0,0,1,1))
ease:
la transición es lenta al inicio, después rápida, después lenta de nuevo (equivalente a: cubic-bezier(0.25,0.1,0.25,1))
ease-in:
la transición es lenta al inicio (equivalente a: cubic-bezier(0.42,0,1,1))
ease-out:
la transición es lenta al final(equivalente a: cubic-bezier(0,0,0.58,1))
ease-in-out:
la transición es lenta al inicio y al final (equivalente a: cubic-bezier(0.42,0,1,1))
linear
ease
ease-in
ease-out
ease-in-out
Veamos un ejemplo.
#temporizador {
height: 100px;
width: 100px;
background-color: #ff0000;
-webkit-transition: -webkit-transform 3s ease-out;
-ms-transition: -ms-transform 3s ease-out;
transition: transform 3s ease-out;
}
#temporizador:hover {
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
Para entender mejor la función cubic-bezier() ( Made by Lea Verou with care. )
Demora ( transition-delay )
La propiedad transition-delay
especifica el número de segundos ( s ) o milisegundos ( ms ) antes de empezar la transición.
En el siguiente ejemplo la transición tardará 1 segundo en empezar.
#demora {
height: 100px;
width: 100px;
background-color: #ff0000;
-webkit-transition: background-color 3s, -webkit-transform 3s;
-ms-transition: background-color 3s, -ms-transform 3s;
transition: background-color 3s, transform 3s;
-webkit-transition-delay: 1s;
transition-delay: 1s;
}
#demora:hover {
background-color: #0000ff;
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}