w3.unpo<code>todo

Transiciones

La propiedad transition representa la declaración abreviada de transition-property ( la propiedad que queremos animar ), transition-duration ( la duración de la transición ), transition-timing-function ( la función de temporizador ), y transition-delay ( la demora ).

La propiedad transition está bien soportada en todos los navegadores modernos. Para soporte en los navegadores antiguos podemos utilizar prefijos o una librería como prefix-free, una librería que trabaja "entre bastidores" añadiendo los prefijos necesarios para que el código funcione correctamente.

El orden en el cual aparecen estas propiedades en la declaración abreviada es el siguiente:

transition-property

La propiedad transition-property establece la propiedad o las propiedades que queremos animar.
El valor de la propiedad transition-property es el nombre de la propiedad CSS o una lista de propiedades separadas por comas. También podemos utilizar la palabra clave all ( todas ) para transicionar todas las propiedades en una sola declaración.

/*una sola propiedad*/
transition-property: color;
/*una lista de propiedades separadas por comas*/
transition-property: letter-spacing, font-size, line-height;
/*todas las propiedades*/
transition-property: all;

En el siguiente ejemplo al pasar por encima ( :hover ) de la caja roja ( <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;
  transition-property: background-color;
  transition-duration: 3s;
}
#transicion:hover {
  background-color: #0000ff;
}

Alternativamente, en este caso podría haber utilizado la siguiente declaración abreviada:

transition: background-color 3s;

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;
  transition-property: background-color, border-radius;
  transition-duration: 3s;
}
#propiedades:hover {
  background-color: #0000ff;
  border-radius: 75px;
}

transition-duration

La propiedad transition-duration establece la duración de la transición,  o sea: decide cuanto tiempo durará la transición entre el valor inicial y el valor final de la propiedad transicionada.

/*una propiedad o todas las propiedades. La transición dura un segundo*/

transition-duration: 1s;

/*también es posible utilizar decimales. La transición dura medio segundo */

transition-duration: .5s;

/*Una lista de valores para una lista de propiedades*/

transition-duration: 1s,5s;

En el siguente ejemplo estoy animando dos propiedades css: transition-property: background-color, border-radius; y quiero que el color cambie en una transición de un segundo mientras que la animación de border-radius tiene que durar 5 segundos. En este caso la propiedad transition-duration toma como valor la lista de las duraciones separadas por una coma:

#duration {
  height: 100px;
  width: 100px;
  background-color: #ff0000;
  transition-property: background-color, border-radius;
  transition-duration: 1s, 5s;
}
#duration:hover {
  background-color: #0000ff;
  border-radius: 75px;
}

Alternativamente, en este caso podría haber utilizado la siguiente declaración abreviada:

transition: background-color 1s, border-radius: 5s;

transition-timing-function
( función de temporizador )

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 linear.

En el siguiente ejemplo la función de temporizador utilizada es ease-out:

#temporizador {
  height: 100px;
  width: 100px;
  background-color: #ff0000;
  transition: transform 1s ease-out;
}
#temporizador:hover {
  transform: rotate(360deg);
}

Para entender mejor la función cubic-bezier() ( Made by Lea Verou with care. )

transition-delay ( demora )

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;
  transition: background-color 3s, transform 3s;
  transition-delay: 1s;
}
#demora:hover {
  background-color: #0000ff;
  transform: rotate(360deg);
}