Transiciones (transition)

Profesores:JAB y Ester Torres

Transition

Las transiciones (transition) funcionan como pequeñas animaciones que siguen las mismas características que la etiqueta 'transform' (cambio de posición, tamaño, rotación...) aunque con la capacidad de poder especificar una duración para que se produzca dicha transformación y así poder utilizarla como una animación sencilla.

Para poder observar su funcionamiento vamos a utilizar un <div> llamado 'martillo' que contiene el dibujo de un martillo (en SVG).

A este <div> le vamos a aplicar varias transiciones (de posición, tamaño y rotación) y para que podamos activar cada una de ellas en el momento que queramos deberás pasar el cursor por encima de cada ejemplo.
Es muy importante tener en cuenta que para que 'transition' funcione en todos los navegadores deberemos repetir la propiedad anteponiendo los prefijos de cada uno de los navegadores:
    -webkit- (para Chrome y Safari)
    -moz- (para Firefox).
    -o- (para Opera)
    -ms- (para las versiones modernas de Internet Explorer)



Transición con una única propiedad

Cuando pases con el cursor por encima del martillo que hay bajo este texto se producirá una transición que durará 1 segundo y medio y que producirá que el <div> martillo se desplace horizontamente 400 píxeles hacia la derecha. 
#martillo{
   transition:left 1.5s;
}

#martillo:hover{
   position:relative;
   left:400px;
}
En el primer código se hace referencia al <div> que contiene el objeto que va a moverse (#martillo). En este ejemplo se especifica que la transición consistirá en un movimiento hacia la derecha y que durará 1.5 segundos. Para que esta transición se produzca debe realizarse el cambio del valof 'left'. Al colocar dicho cambio bajo ':hover' éste se producirá cuando el usuario coloque el cursor encima de martillo.

Al estar utilizando la propiedad 'left', es obligatorio que el valor de la propiedad 'position' sea 'absolute' o 'relative' (según las características de lo que se desea conseguir

Transición con múltiples propiedades

Para especificar el cambio de varias propiedades con diferentes tiempos para para cada una de ellas, únicamente tenemos que separar las diferentes propiedades con ",".

Así, en este ejemplo, al pasar el cursor por encima, se producirán 6 cambios de propiedades al mismo tiempo: 
#martillo{
   background-color:orange;
   width:100px;
   height:175px;
   transition:left 1.5s, background-color 2s, width 1s, height 1s, padding-left 1s, padding-top 1s;
}

#martillo:hover{
   position:relative;
   left:400px;
   background-color:black
   width:225px;
   height:200px;
   padding-left:100px;
   padding-top:20px;
}
En el primer selector (#martillo) se especifican los valores iniciales (color de fondo 'background-color', anchura 'width' y altura 'height'), los que no se definan (como 'padding-left' y 'padding-top') se tomarán los valores por defecto.

Las palabras mágicas

Aunque no es obligatorio, tenemos la posibilidad de especificar el tipo de movimiento y si debe existir algún retardo para que empiece la animación.

Además, como todavia es necesario repetir el código anteponiendo los prefijos -webkit-, -moz-, -op- y -ms- (para asegurar la compatibilidad con todos los navegadores), es interesante poder especificar todos estos parámetros en una sola línea.
transition:[propiedad a modificar] [Duración en segundos] [Tipo de animación] [Retardo];
transition: width 2s ease-out, 0.5s;
[Propiedades a modificar]:
En los ejemplos anteriores hemos utilizado unas cuantas propiedades, pero se pueden utilizar muchás más, como:
[Duración en segundos]:
Se debe especificar el número de segundos que va a durar la animación.
Primero se escribe un valor numérico (los segundos) y seguido la "s" (por ejemplo: 3s).
[Tipo de animación]:
Esta posibilidad es opcional. Tenemos la posibilidad de indicar un tipo de 'easing', es decir, si la animación empezará suavemente e irá acelerándose progresivamente, si pasará todo lo contrario o si el movimiento tendrá una velocidad uniforme durante todo su recorrido entre otras.

Algunas de las posibilidades son las siguientes:
[Retardo]:
En este apartado es posible posible especificar un tiempo (en segundos) que el navegador esperará antes de iniciar la animación.
Se especifica el número de segundos a esperar seguido de la "s" (por ejemplo: 1s). 
#martillo{
   opacity:1;
   transition:opacity 2s ease-out 0.5s;
}

#martillo:hover{
   opacity:0;	
}
Cuando coloques el cursor encima del martillo que hay sobre estas líneas, primero -se esperará medio segundo (0.5s)-, después de la espera, el martillo se irá haciendo transparente en una animación con deceleración (ease-out) que durará 2 segundos (empezará muy rápido y a medida que vaya haciendose transparente irá reduciendo la velocidad).

Compatibilidad con todos los navegadores

Para garantizar la compatibilidad con navegadores antiguos, las transiciones es conveniente que lleven los prefijos, quedando de esta manera un código más largo que la deuda exterior de Zaire.

Así, el código del ejemplo anterior queda de la siguiente manera:
#martillo{
   opacity:1;
   -webkit-opacity:1;
   -moz-opacity:1;
   -o-opacity:1;
   -ms-opacity:1;

   transition:opacity 2s ease-out 0.5s;
   -webkit-transition:opacity 2s ease-out 0.5s;
   -moz-transition:opacity 2s ease-out 0.5s;
   -o-transition:opacity 2s ease-out 0.5s;
   -ms-transition:opacity 2s ease-out 0.5s;
}

#martillo:hover{
   opacity:0;	
   -webkit-opacity:0;
   -moz-opacity:0;
   -o-opacity:0;
   -ms-opacity:0;
}
Hasta hace poco Internet Explorer 9 todavia no era compatible con las transiciones, mientras que el resto de navegadores lo aceptan desde versiones anteriores a las actuales.

Para conocer las versiones de navegadores que son compatibles con las transiciones puedes consultar esta tabla actualizada de Can I use?.