Animaciones

Las animaciones CSS3 permiten animar la transición entre un estilo CSS y otro. Las animaciones constan de dos componentes: un estilo que describe la animación CSS y un conjunto de fotogramas que indican su estado inicial y final, así como posibles puntos intermedios en la misma.

Para crear una secuencia de animación CSS, se estilizará el elemento que se quiera animar con la propiedad'animation'y sus sub-propiedades. Con ellas podemos no solo configurar el ritmo y la duración de la animación sino otros detalles sobre la secuencia de la animación. Con ellas no configuramos la apariencia actual de la animación, para ello disponemos de @keyframes.

Las subpropiedades de'animation'son:

Animation-delay:

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.

Animation-direction:

Indica si la animación debe retroceder hasta el fotograma de inicio al finalizar la secuencia o si debe comenzar desde el principio al llegar al final.

Animation-duration:

Indica la cantidad de tiempo que la animación consume en completar su ciclo .

Animation-iteration-count:

El número de veces que se repite. Podemos indicar infinite para repetir la animación indefinidamente.

Animation-name:

Especifica el nombre de la regla @keyframes que describe los fotogramas de la animación.

Animation-play-state:

Permite pausar y reanudar la secuencia de la animación.

Animation-timing-function:

Indica el ritmo o como se muestran los fotogramas de la animación estableciendo curvas de aceleración.

Animation-fill-mode:

Especifica qué valores tendrán las propiedades después de finalizar la animación (los de antes de ejecutarla, los del último fotograma de la animación o ambos).

Una vez configurado el tiempo de la animación, necesitamos definir su apariencia. Esto lo haremos estableciendo dos fotogramas más usando la regla @keyframes. Cada fotograma describe cómo se muestra cada elemento animado en un momento dado durante la secuencia de la animación.

Desde que se define el tiempo y el ritmo de la animación, el fotograma usa percentage para indicar en qué momento de la secuencia de la animación tiene lugar. 0% es el principio, 100% es el estado final de la animación. Debemos especificar estos dos momentos para que el navegador sepa dónde debe comenzar y finalizar; debido a su importancias, estos dos momentos tienen alias especiales: from y to. Además puedes, opcionalmente, incluir fotogramas que describan pasos intermedios entre el punto inicial y final de la animación.

Pinchar aquí para ver ejemplos

Pinchar aquí para volver a inicio