Transiciones de CSS

Esta es una tecnolog铆a experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producci贸n.

Las transiciones CSS, parte del borrador de la especificaci贸n CSS3, proporcionan una forma de animar los cambios de las propiedades CSS, en lugar de que los cambios surtan efecto de manera instant谩nea. Por ejemplo, si cambias el color de un elemento de blanco a negro, normalmente el cambio es instant谩neo. Al habilitar las transiciones CSS, el cambio sucede en un intervalo de tiempo que puedes especificar, siguiendo una curva de aceleraci贸n que puedes personalizar.

Nota: como la especificaci贸n de las transiciones CSS todav铆a se encuentra en fase de borrador, a todas las propiedades asociadas con ellas se les a帽ade el prefijo "-moz-" para usarse en Gecko. Para la compatibilidad con WebKit, se aconseja usar tambi茅n el prefijo "-webkit-" y para la compatibilidad con Opera, el prefijo "-o-". Es decir, por ejemplo,  la propiedad de transici贸n se especificar铆a como -moz-transition, -webkit-transition y -o-transition.

Las propiedades de transici贸n CSS

Las transiciones CSS se controlan mediante la propiedad abreviada transition. Es preferible utilizar este m茅todo porque de esta forma se evita que la longitud de la lista de par谩metros sea diferente, lo que puede dar lugar a tener que emplear un tiempo considerablemente largo en depurar el c贸digo CSS.

Puedes controlar los componentes individuales de la transici贸n usando las siguientes subpropiedades:

transition-property
Especifica el nombre o nombres de las propiedades CSS a las que deber铆an aplicarse las transiciones. S贸lo las propiedades que se enumeran aqu铆 son animadas durante las transiciones; los cambios en el resto de las propiedades suceden de manera instant谩nea como siempre.
transition-duration
Especifica la duraci贸n en la que suceder谩n las transiciones. Puedes especificar una 煤nica duraci贸n que se aplique a todas las propiedades durante la transici贸n o valores m煤ltiples que permitan a cada propiedad de transici贸n un per铆odo de tiempo diferente.
transition-timing-function
Especifica la curva c煤bica b茅zier que se usa para definir c贸mo se computan los valores intermedios para las propiedades.
transition-delay
Define el tiempo de espera entre el momento en que se cambia una propiedad y el inicio de la transici贸n.

Detectar la finalizaci贸n de una transici贸n

Hay un 煤nico acontecimiento que se desencadena cuando se completan las transiciones. En Firefox, el evento es transitionend, en Opera, OTransitionEnd y en WebKit es webkitTransitionEnd. Consulta la tabla de compatibilidades al final de la p谩gina si deseas m谩s informaci贸n. El evento transitionend ofrece dos propiedades:

propertyName
Una cadena que indica el nombre de la propiedad CSS cuya transici贸n se complet贸.
elapsedTime
Un float que indica el n煤mero de segundos que la transici贸n se hab铆a estado ejecutando en el momento en que el acontecimiento se desencaden贸. Este valor no est谩 afectado por el valor de transition-delay.

Como es habitual, puedes usar el m茅todo element.addEventListener() para monitorizar este acontecimiento:

el.addEventListener("transitionend", updateTransition, true);
Nota: el evento "transitionend" no se dispara si la transici贸n se anula debido a que el valor de la propiedad de animaci贸n es modificado antes de que la transici贸n se complete.

Propiedades que pueden ser animadas

Las transiciones y las animaciones CSS pueden usarse para animar las siguientes propiedades.

Nota: el conjunto de propiedades que puede animarse est谩 sujeto a cambios, por lo tanto se recomienda evitar incluir cualquier propiedad en la lista que no anime porque en un futuro podr铆a provocar resultados inesperados.
Propiedad Tipo de valor
background-color <color>
background-image solo degradado; no est谩 implementado en Firefox (see error 536540)
background-position <percentage><length>
background-size <percentage> | <length>
border-color (including sub-properties) <color>
border-radius (including sub-properties) <percentage> | <length>
border-width (including sub-properties) <length>
border-spacing <length>
bottom <percentage> | <length>
-moz-box-flex n煤mero
box-shadow sombra
color <color>
-moz-column-count n煤mero
-moz-column-gap <length>, palabras clave
-moz-column-rule-color <color>
-moz-column-rule-width <length>, palabras clave
-moz-column-width <length>
clip rect谩gulo
fill pintar
fill-opacity valor de opacidad
flood-color <color> | palabras clave
font-size <percentage> | <length>
font-size-adjust n煤meros, palabras clave
font-stretch palabras clave
font-weight n煤meros| palabras clave (excluyendo bolder, lighter)
height <percentage> | <length>
-moz-image-region rect()
left <percentage> | <length>
letter-spacing <length>
lighting-color <color> | palabras clave
line-height n煤mero | <percentage> | <length>
margin (including sub-properties) <length>
marker-offset <length>
max-height <percentage> | <length>
max-width <percentage> | <length>
min-height <percentage> | <length>
min-width <percentage> | <length>
opacity n煤mero
outline-color <color>
outline-offset entero
-moz-outline-radius (including sub-properties) <percentage> | <length>
outline-width <length>
padding (including sub-properties) <length>
right <percentage> | <length>
stop-color <color> | palabras clave
stop-opacity valor de opacidad
stroke pintar
stroke-dasharray dasharray
stroke-dashoffset <percentage> | <length>
stroke-miterlimit miterlimit
stroke-opacity valor de opacidad
stroke-width <percentage> | <length>
text-indent <percentage> | <length>
text-shadow sombra
top <percentage> | <length>
-moz-transform-origin <percentage> | <length>, keywords
-moz-transform transform-function
vertical-align <percentage> | <length>, palabras clave
visibility visibilidad
width <percentage> | <length>
word-spacing <percentage> | <length>
z-index entero

Cuando las listas de valores de propiedades tienen longitudes diferentes

Si cualquier lista de valores de propiedades es m谩s corta que las otras, sus valores se repiten para hacer que coincidan. Por ejemplo:

div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s;
}

Se considera como si fuera:

div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s, 3s, 5s;
}

De manera similar, si cualquier lista de valores de propiedades es m谩s larga que la de transition-property, se trunca, de forma que si tienes la siguiente CSS:

div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s, 2s, 1s;
}

Se interpreta como:

div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s;
}

Funciones de intervalos de transici贸n

Las funciones de intervalos determinan el c谩lculo de los valores intermedios de la transici贸n. La funci贸n de intervalo puede especificarse proporcionando el gr谩fico de la funci贸n correspondiente, como lo definen los cuatro puntos que definen una c煤bica b茅zier:

En lugar de especificar directamente una b茅zier, existen valores de intervalos predeterminados:

  • ease, equivalente a cubic-bezier(0.25, 0.1, 0.25, 1.0)
  • linear, equivalente a cubic-bezier(0.0, 0.0, 1.0, 1.0)
  • ease-in, equivalente a cubic-bezier(0.42, 0, 1.0, 1.0)
  • ease-out, equivalente a cubic-bezier(0, 0, 0.58, 1.0)
  • ease-in-out, equivalente a cubic-bezier(0.42, 0, 0.58, 1.0)

Ejemplos

Una muestra del efecto de transici贸n

Este sencillo ejemplo proporciona demostraciones de distintos efectos de transici贸n sin excesivos adornos.

En primer lugar, el HTML para crear los elementos sobre los que probaremos nuestras transiciones:

<ul>
  <li id="long1">Transici贸n larga, gradual...</li>
  <li id="fast1">Transici贸n muy r谩pida...</li>
  <li id="delay1">Transici贸n larga de un minuto de retraso...</li>
  <li id="easeout">Usar intervalos de alejamiento...</li>
  <li id="linear">Usar intervalos lineales...</li>
  <li id="cubic1">Usar c煤bica b茅zier(0.2, 0.4, 0.7, 0.8)...</li>
</ul>

Cada elemento tiene su propia id.; la CSS se encarga del resto. Veamos un par de ejemplos.

Usar un retraso

Este ejemplo realiza una transici贸n de tama帽o de fuente de cuatro segundos con dos segundos de retraso entre el momento en que el usuario pasa el rat贸n por encima del elemento y el comienzo del efecto de animaci贸n:

#delay1 {
  position: relative;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
  font-size: 14px;
}

#delay1:hover {
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
  font-size: 36px;
}

Usar una funci贸n de intervalos de transici贸n lineales

De manera predeterminada, la funci贸n de intervalos que se usa para computar los pasos intermedios durante la secuencia de animaci贸n proporciona una curva suave de aceleraci贸n y desaceleraci贸n para el efecto de animaci贸n. Si prefieres que el efecto mantenga una velocidad constante a lo largo de la animaci贸n, puedes especificar que deseas usar la funci贸n de intervalos de transici贸n linear, tal y como se muestra a continuaci贸n.

transition-timing-function: linear;

Existen distintas funciones de intervalos est谩ndares disponibles; consulta transition-timing-function para tener m谩s detalles.

Especificar una funci贸n de intervalos c煤bicos b茅zier

Puedes controlar a煤n m谩s el intervalo de la secuencia de animaci贸n si especificas tu propia curva c煤bica b茅zier que describe la velocidad de animaci贸n. Por ejemplo:

  transition-timing-function: cubic-bezier(0.2, 0.4, 0.7, 0.8);

Establece una funci贸n de intervalo con una curva b茅zier definida por los puntos (0.0, 0.0), (0.2, 0.4), (0.7, 0.8) y (1.0, 1.0).

Men煤s de resaltado

Un uso com煤n de CSS es resaltar elementos de un men煤 mientras el usuario desplaza el cursor del rat贸n por encima de ellos. Es f谩cil usar las transciones para hacer que el efecto sea a煤n m谩s atractivo.

Antes de que miremos los fragmentos de c贸digo, tal vez desees echar un vistazo a la demo en vivo (suponiendo que tu navegador admita transiciones). Tambi茅n puedes echar un vistazo directamente a la CSS que usa.

Primero configuramos el men煤 usando HTML:

<div class="sidebar">
  <p><a class="menuButton" href="home">Inicio</a></p>
  <p><a class="menuButton" href="about">Acerca de</a></p>
  <p><a class="menuButton" href="contact">Contacto Us</a></p>
  <p><a class="menuButton" href="links">V铆nculos</a></p>
</div>

Despu茅s construimos la CSS para implementar el aspecto de nuestro men煤. Las porciones relevantes se muestran a continuaci贸n:

.menuButton {
  position: relative;
  transition-property: background-color, color;
  transition-duration: 1s;
  transition-timing-function: ease-out;
  -webkit-transition-property: background-color, color;
  -webkit-transition-duration: 1s;
  -o-transition-property: background-color, color;
  -o-transition-duration: 1s;
  text-align: left;
  background-color: grey;
  left: 5px;
  top: 5px;
  height: 26px;
  color: white;
  border-color: black;
  font-family: sans-serif;
  font-size: 20px;
  text-decoration: none;
  -moz-box-shadow: 2px 2px 1px black;
  padding: 2px 4px;
  border: solid 1px black;
}

.menuButton:hover {
  position: relative;
  transition-property: background-color, color;
  transition-duration: 1s;
  transition-timing-function: ease-out;
  -webkit-transition-property: background-color, color;
  -webkit-transition-duration: 1s;
  -o-transition-property: background-color, color;
  -o-transition-duration: 1s;
  background-color:white;
  color:black;
  -moz-box-shadow: 2px 2px 1px black;
}

Esta CSS establece el aspecto del men煤 con los colores de fondo y del texto que cambian cuando el elemento est谩 en su estado :hover.

En lugar de describir el efecto con todo detalle, puedes echar un vistazo a la muestra en vivo si tu navegador admite transiciones (Firefox y WebKit nightlies, Opera 10.5).

Usar eventos de transici贸n para animar un objeto

En este ejemplo, una peque帽a caja con texto dentro se mueve hacia atr谩s y hacia delante a trav茅s de la pantalla y los colores de fondo y del texto se difuminan entre dos valores mientras tiene lugar la animaci贸n.

Antes de que miremos los fragmentos de c贸digo, tal vez desees echar un vistazo a la demo en vivo (suponiendo que tu navegador admita transiciones). Tambi茅n puedes echar un vistazo directamente a la CSS que usa.

El HTML

El HTML para este ejemplo es muy sencillo:

<!DOCTYPE html>
<html>
  <head>
    <title>CSS Transition Demo</title>
    <link rel="stylesheet" href="transitions.css" type="text/css">
    <script src="transitions.js" type="text/javascript"></script>
  </head>
  <body onload="runDemo()">
    <div class="slideRight">隆Esto es una caja!</div>
  </body>
</html>

Lo 煤nico que hay que observar aqu铆 es que establecemos la clase para nuestra caja en "slideRight" inicialmente y cuando el documento haya terminado de cargarse, se ejecuta la funci贸n runDemo() del c贸digo JavaScript.

La CSS

Para crear nuestro efecto de animaci贸n, usamos dos clases de CSS, "slideRight" y "slideLeft". Si deseas ver el c贸digo completo de CSS, puedes mirar el archivo transitions.css en su totalidad. A continuaci贸n se muestran s贸lo los trozos relevantes:

.slideRight {
  position: absolute;
  transition-property: background-color, color, left;
  transition-duration: 5s;
  -webkit-transition-property: background-color, color, left;
  -webkit-transition-duration: 5s;
  -o-transition-property: background-color, color, left;
  -o-transition-duration: 5s;
  background-color: red;
  left: 0%;
  color: black;
}

Observa que aqu铆 especificamos de manera expl铆cita la propiedad de posici贸n. Esto es necesario porque s贸lo aquellos elementos cuya propiedad de posici贸n se defina de manera expresa pueden animar su posici贸n.

La propiedad transition-property se usa para enumerar las propiedades CSS que deseamos animar. En este caso, las propiedades que se van a animar son background-color, color y left. La propiedad transition-duration indica que deseamos que la animaci贸n tarde 5 segundos desde que comienza hasta que termina.

Se incluyen los equivalentes WebKit y Opera para permitir que el ejemplo funcione en el software correspondiente.

La clase "slideRight" se usa para especificar el punto de inicio para que la animaci贸n desplace el elemento desde el borde izquierdo hasta el borde derecho de la ventana del navegador. Como tal, define la posici贸n y el color del elemento cuando est谩 al principio de la secuencia de animaci贸n; concretamente, el valor para su propiedad left es 0%, lo que indica que comenzar谩 en el borde izquierdo de la ventana.

Se muestra a continuaci贸n la clase "slideLeft", que define el punto final de la animaci贸n, es decir, el punto en el que concluir谩 la animaci贸n de izquierda a derecha y cambiaremos a una animaci贸n de derecha a izquierda.

.slideLeft {
  position: absolute;
  transition-property: background-color, color, left;
  transition-duration: 5s;
  -webkit-transition-property: background-color, color, left;
  -webkit-transition-duration: 5s;
  -o-transition-property: background-color, color, left;
  -o-transition-duration: 5s;
  text-align: center;
  background-color: blue;
  left: 90%;
  color: white;
  width: 100px;
  height: 100px;
}

Los valores de color aqu铆 se han cambiado para hacer que los colores de fondo y del texto cambien durante el tiempo de la secuencia de animaci贸n. Adem谩s de esto, la propiedad left est谩 aqu铆 al 90%.

El c贸digo JavaScript

Una vez que hemos establecido los extremos de la secuencia de animaci贸n, lo que tenemos que hacer es iniciar la animaci贸n. Podemos hacerlo f谩cilmente usando JavaScript.

Nota: una vez que la compatibilidad para las animaciones CSS est茅 disponible, el c贸digo JavaScript no ser谩 necesario para lograr este efecto.

En primer lugar, la funci贸n runDemo() que se llama cuando el documento se carga para inicializar la secuencia de animaci贸n:

function runDemo() {
  var el = updateTransition();

  // Configurar un controlador de eventos para invertir la direcci贸n
  // cuando finalice la transici贸n.

  el.addEventListener("transitionend", updateTransition, true);
}

Es bastante sencillo: llama a la funci贸n updateTranslation() que definiremos enseguida, cuyo trabajo es establecer la clase para el elemento que estamos animando seg煤n la direcci贸n en la que queramos que viaje. A continuaci贸n configura un proceso de escucha de evento para observar el evento "transitionend" que se env铆a cuando se completa una transici贸n; esto nos permite saber cu谩ndo es el momento para cambiar la clase del elemento para revertir la direcci贸n de la animaci贸n.

La funci贸n updateTransition() tiene este aspecto:

function updateTransition() {
  var el = document.querySelector("div.slideLeft");

  if (el) {
    el.className = "slideRight";
  } else {
    el = document.querySelector("div.slideRight");
    el.className = "slideLeft";
  }

  return el;
}

Esto ubica el elemento que estamos animando al buscarlo por su nombre de clase (aqu铆 podr铆amos usar una id, por supuesto, pero seguidme la corriente). En primer lugar buscamos el nombre de la clase "slideLeft". Si se encuentra, cambiamos la clase del elemento a "slideRight". Esto iniciar谩 la transici贸n de derecha a izquierda, puesto que es el momento de que se deslice a la izquierda si el elemento est谩 ya en el borde derecho, que ser谩 cuando llegue el evento "transitionend" y la clase del elemento sea "slideLeft" (se deslice a la izquierda).

Si no se halla ning煤n elemento que coincida con la clase "slideLeft", buscamos el elemento que coincida con "slideRight" y cambiamos su clase a "slideLeft", comenzando de ese modo la animaci贸n en la direcci贸n contraria.

Compatibilidad de navegadores

Navegadores Compatibilidad b谩sica Propiedad Evento de transici贸n finalizada
Internet Explorer (ninguna, a partir de IE9 pp7) --- ---
Firefox (Gecko) 4.0 (2.0) -moz-transition transitionend
Opera 10.5 -o-transition OTransitionEnd
Safari | Chrome | WebKit 3.2 | yes | yes -webkit-transition webkitTransitionEnd

Compatibilidad de navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
Funcionalidad Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Compatibilidad b谩sica ? ? ? ? ?
Funcionalidad Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Compatibilidad b谩sica ? ? ? ? ?

Consultar tambi茅n