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

Mira un simple encabezamiento E1:

demostración de transición

El código CSS es sobre todo muy sencillo:

 h1 {color: negro font-size: 300% - transición: 1s de color facilidad in-} h1: hover {color: red-}

Comience haciendo caso omiso de la transición atributo. Si nos fijamos en el resto del código, es fácil ver lo que hace. En el estado normal, el título es negro. En el estado estacionario, el color es rojo. Por lo general, el título se vuelve roja tan pronto como el ratón pasa sobre ella, y al instante se vuelve negro cuando las hojas del 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 un muy simple div:

Video: 10.- Curso de CSS3. Transiciones y animaciones

Recuadro 1

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

Video: Como hacer botones animados en CSS3 sin transiciones y Respondiendo comentarios

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

los transformar se define en la: flotar pseudo-clase. El único elemento nuevo es la transición se especifica 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 definida por esta etiqueta. El valor por defecto es todas, pero se espera que otros tipos de trabajo, incluyendo color, longitud, anchura, pecentage, opacidad, y número. En caso de duda, utilice el estándar todas.

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

• función de temporización: Si desea que la animación 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: facilitar, facilitar-en, Facilitarse, la facilidad de entrada-salida.

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

Si lo prefiere, puede utilizar las propiedades individuales de las diversas 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 CSS se pueden animar, pero muchos pueden ser. Se puede requerir un poco de experimentación para determinar qué atributos CSS puede ser animada con el transición atributo.

Desafortunadamente, la acción transición atributo no es compatible con cualquier navegador principales, pero hay versiones específicas del proveedor para Mozilla (-moz-), WebKit (-webkit) Y Opera (-o-). Su mejor apuesta hasta que el soporte está muy extendida es incluir todas las versiones específicas del proveedor, además de la versión estándar.