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.
-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);
Propiedades que pueden ser animadas
Las transiciones y las animaciones CSS pueden usarse para animar las siguientes propiedades.
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.
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
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 | ? | ? | ? | ? | ? |