⇪

Transiciones

facebook-svg gplus-svg twitter-svg

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);
}