Ya es posible cambiar las propiedades CSS sobre la marcha a través de pseudo-clases (como vuelo estacionario) o con código javascript. Antes de CSS3, todos los cambios de estado CSS sucedieron al instante. Con el nuevo transición atributo, puede causar transiciones que sucedan en el tiempo.

Mira una sencilla encabezado h1:

Transición demo

El código CSS es principalmente bastante sencillo:

 h1 {color: negro font-size: 300% - transición: 1s de color facilitan en ejercicio} h1: hover {color: rojo-}

Comience por ignorar la transición atribuir. Si nos fijamos en el resto del código, es fácil ver lo que hace. En el estado normal, el título es de color negro. En el estado estacionario, el color es rojo. Normalmente, el título se vuelve rojo cuando el ratón pasa sobre ella, y al instante se vuelve negro cuando las hojas de ratón.

Sin embargo, cuando el transición Se agrega atributo, el cambio de color no es inmediata, sino que toma un segundo. El color cambia gradualmente de negro a rojo y la espalda.

Las transiciones son aún más interesante cuando se empareja con transformaciones. Imagine una muy simple div:

Recuadro 1

Aplique un poco de magia CSS3 y cuando el usuario se desplaza sobre la div, que gira suavemente hasta que sea al revés. Cuando el usuario sale de la div, suavemente gira de nuevo a su posición original:

 #box {transición: todos los 1s facilidad-in-altura: 100px; Ancho: 100px; frontera: 1px negro- sólida} #box: hover {transformar: rotación (180 grados) -}

los transformar se define en el: flotar pseudo-clase. El único elemento nuevo es la transición especificada en el estilo estándar de la clase '.

los transición atributo toma varios parámetros:

• propiedad de animación: El tipo de animación se define en esta etiqueta. El valor por defecto es todas, pero se espera que otros tipos de trabajo, incluyendo color, largo, ancho, pecentage, opacidad, y número. En caso de duda, utilice el estándar todas.

• duración: La longitud de la animación en segundos. Una segunda es 1s.

• función de temporización: Si desea que la animación que se produzca a una velocidad constante, utilice. Si quieres un movimiento más natural que acelera gradualmente y se ralentiza en los extremos de la animación, utilice uno de los siguientes: facilidad, servidumbresen, la facilidad de salida, facilidad in-out.

• retraso: Si se incluye un segundo valor de tiempo, esto se considerará un retraso. La animación no comenzará hasta después de la demora.

Si lo prefiere, puede utilizar las propiedades individuales de las distintas partes de la animación, pero la mayoría de desarrolladores prefieren el atajo de una línea (como el usado para las fronteras).

No todos los atributos de estilo CSS se pueden animar, pero muchos pueden ser. Se puede requerir un poco de experimentación para determinar qué atributos CSS puede ser animado con la transición atribuir.

Por desgracia, las acciones transición atributo no está apoyada por ningún navegadores principales, pero hay versiones específicas del proveedor para Mozilla (-moz-), Webkit (-webkit) Y Opera (-o-). Su mejor apuesta hasta apoyo es generalizado es incluir todas las versiones específicas del proveedor, además de la versión estándar.