Conseguir que tu página cobre vida con animaciones CSS

Las animaciones de Hojas de estilo CSS no solo permiten cambiar sin dificultad los valores de propiedades CSS en el transcurso del tiempo (las transiciones CSS ya permiten hacer esto). También te ofrecen la posibilidad de diseñar animaciones complejas con fotogramas clave, así como un control más preciso mediante scripting. Por lo general, las animaciones CSS permiten crear contenido web mucho más interesante y activo (por ejemplo, consulta la demo de IE Test Drive Beta Fish), y ofrecen un mejor rendimiento de representación en comparación con las animaciones tradicionales controladas por JavaScript.

La regla @keyframe

La diferencia principal entre las animaciones CSS y las transiciones CSS es la regla @keyframes. Permite especificar los valores que necesita tener una propiedad CSS en distintos puntos durante la animación. Veamos un ejemplo básico.


@keyframes fadeOut {
  from {	
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.TransformDemoDivFadeOut:hover {
  animation-duration: 2s;
  animation-name: fadeOut;
}

A continuación se incluye una captura de pantalla de esta página de ejemplo. También puedes ver una versión activa de este ejemplo. Solo tienes que mantener el cursor encima del cuadrado (o pulsarlo con el dedo) y el cuadrado desaparecerá lentamente.

Captura de pantalla de un cuadrado amarillo antes de la animación

La regla @keyframes, seguida del identificador que elijas, define una animación. Dentro de esta regla puedes definir varios fotogramas clave, es decir, puntos durante la animación en los que proporcionas valores fijos para ciertas propiedades CSS. En el ejemplo anterior, se utilizan las palabras clave from y to para definir los puntos de inicio y de finalización de una animación. Dentro de los fotogramas clave podemos establecer los valores que deseemos para las distintas propiedades (en nuestro caso, queremos que la opacidad del elemento empiece en 1 y se anime hasta 0, lo cual hará que desaparezca el elemento). Como alternativa a las palabras clave from y to, también puedes usar 0% y 100% al establecer los valores inicial y final de las animaciones. Si faltan los fotogramas clave from (o 0%) o to (o 100%), se utilizarán los valores de estilo normal del elemento en su lugar.

Después de definir la regla @keyframes en el estilo, la animación se desencadena estableciendo la propiedad animation-name del elemento para que incluya animación. En este ejemplo, el elemento se debe animar al mantener el mouse. Por lo tanto, tienes que usar la seudoclase CSS :hover. Además, utiliza la propiedad animation-duration para establecer la duración de la animación.

En el ejemplo anterior, utilizamos una animación CSS para lograr el mismo efecto que una transición CSS (y, de hecho, utilizamos un poco más de marcado para ello). Una de las diferencias principales entre las animaciones y las transiciones CSS es la capacidad de definir los valores deseados para distintas propiedades CSS en diferentes puntos durante una animación, mientras que una transición solo permite especificar los valores inicial y final.

Uso de varios fotogramas clave para crear animaciones complejas

Considera la siguiente regla @keyframes:


@keyframes fadeOutInOut {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

A continuación se incluye una captura de pantalla de esta página de ejemplo. También puedes ver una versión activa de este ejemplo. Solo tienes que mantener el cursor encima del cuadrado (o pulsarlo con el dedo) y el cuadrado desaparecerá, volverá a aparecer y luego desaparecerá de nuevo.

Captura de pantalla de un cuadrado amarillo antes de la animación

A diferencia de lo que sucede con las transiciones CSS, con las animaciones CSS no estamos obligados a incluir la animación en una dirección (del principio al final). Además, se elimina la limitación de incluir animación en todas las propiedades deseadas simultáneamente. Veamos otro ejemplo.


@keyframes fadeOutInOutSwirl {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.5;
    transform: rotateZ(0deg); 
  }
  75% {
    opacity: 0.5;
    transform: rotateZ(180deg);
  }
  100% {
    opacity: 1.0;
    transform: rotateZ(360deg);
  }
}

A continuación se incluye una captura de pantalla de esta página de ejemplo. También puedes ver una versión activa de este ejemplo. Solo tienes que mantener el cursor encima del cuadrado (o pulsarlo con el dedo) y el cuadrado desaparecerá parcialmente, girará en sentido opuesto a las agujas del reloj, girará de nuevo en sentido opuesto a las agujas del reloj y luego volverá a aparecer.

Captura de pantalla de un cuadrado amarillo antes de la animación

Observa cómo el marcado de este ejemplo anima la opacidad durante el primer cuarto de la animación (del 0% al 25%) y luego manipula la opacidad y gira el elemento durante el resto de la animación. Gracias a esta flexibilidad, con las animaciones CSS puedes generar contenido web complejo, fluido y eficiente en cuanto a recursos.

Propiedades de animación CSS

La especificación de las animaciones CSS ofrece una serie de propiedades que proporcionan un control preciso del contenido animado.

PropiedadDescripción

animation

Especifica un valor abreviado que define todas las propiedades de la animación (excepto animation-play-state).

animation-delay

Especifica el desplazamiento dentro de un ciclo de animación (la cantidad de tiempo desde el inicio de un ciclo) antes de mostrar la animación. Los valores de esta propiedad deben especificarse en segundos (anexados con "s"; —por ejemplo, animation-delay: 2s;)

animation-direction

Especifica la dirección de reproducción de un ciclo de animación. Si se establece animation-direction en "normal", la animación se reproducirá según lo esperado (las propiedades se animarán a partir de sus valores del 0% al 100%). Si se establece en "reverse", se logra el efecto opuesto. Con los valores "alternate" y "alternate-reverse", la animación alterna entre los modos "normal" y "reverse" en una configuración de varias iteraciones.

animation-duration

Especifica el tiempo que tarda en completarse un ciclo de una animación. Los valores de esta propiedad deben especificarse en segundos (anexados con "s"; por ejemplo, animation-duration: 2s;)

animation-fill-mode

Especifica si los efectos de una animación son visibles antes o después de que se reproduzca. Esta propiedad define las propiedades CSS que se aplican al elemento al final de una animación. Si se establece en "none" (el valor inicial), un elemento de animación volverá a sus propiedades de estilo originales después de completarse la animación. Si se establece esta propiedad en el valor "forwards", se especifica que los valores finales de la animación (los especificados en los fotogramas clave "a" o "100%") se aplicarán cuando se complete.

animation-iteration-count

Especifica la cantidad de veces que se reproduce un ciclo de animación. Si se establece esta propiedad en "infinite", la animación se ejecutará indefinidamente.

animation-name

Especifica uno o más nombres de animación. Un nombre de animación identifica (o selecciona) una regla arroba @keyframes de CSS.

animation-play-state

Especifica si una animación se está reproduciendo o está en pausa. Esta propiedad permite pausar una animación si se establece el valor de la propiedad en "paused" y reanudarla si se establece el valor en "running". Ten en cuenta que si restableces la propiedad animation-play-state de una animación completada en "running", no se reiniciará. Para reiniciar una animación, debes volver a agregarla al elemento.

animation-timing-function

Especifica los valores de propiedad intermedios que deben usarse durante un único ciclo de una animación.

 

La última propiedad definida aquí, animation-timing-function, permite definir una curva Bézier que especifica la rapidez con la que cambian los valores animados. En una animación de fotogramas clave, esta función se aplica entre fotogramas clave. Además, animation-timing-function se puede usar dentro de una definición de fotograma clave y, por tanto, solo se aplica a la transición de ese fotograma clave al siguiente.

Internet Explorer 10 incluye varias definiciones de funciones integradas (por ejemplo, ease, linear, ease-in, ease-out, etc.), así como una función cubic-bezier() que te permite especificar tus propias funciones de tiempo.

Veamos algunos ejemplos de estas funciones de tiempo en acción. Esta página de ejemplo tiene una fila de cuadrados, cada uno con las mismas animaciones aplicadas, pero con una función de tiempo distinta. Observa las ligeras variaciones de velocidad de cada animación.

También puedes visitar nuestro sitio para practicar con animaciones CSS, que te permite manipular directamente las funciones de tiempo.

Eventos de JavaScript

El módulo de animaciones CSS especifica tres eventos de JavaScript que pueden activarse durante una animación.

EventoDescripción

animationstart

Se produce al comienzo de la animación, teniendo en cuenta los retrasos de animación (especificados por la propiedad animation-delay), si fuera necesario. Un retraso negativo activa el evento, y el tiempo transcurrido es equivalente al valor absoluto del retraso.

animationend

Se produce cuando termina la animación.

animationiteration

Se produce al final de cada iteración de una animación. Este evento solo se produce cuando la propiedad animation-iteration-count está establecida en un valor mayor que uno.

 

Se puede escuchar un evento de animación de la misma forma en que se escuchan otros eventos de JavaScript. Observa el siguiente ejemplo de código:


element.addEventListener(
  "animationstart",
  function () { window.alert("Animation started!") }
);

Este ejemplo desencadena un cuadro de alerta después de iniciarse una animación en el elemento de destino. La información de contexto del evento lleva el nombre de la animación (animationName) y, opcionalmente, una variable elapsedTime que almacena el tiempo transcurrido desde que se desencadenó la animación.

Puedes ver una versión activa de este ejemplo. Solo tienes que mantener el cursor encima del cuadrado (o pulsarlo con el dedo) y el cuadrado desaparecerá parcialmente, girará en sentido opuesto a las agujas del reloj, girará de nuevo en sentido opuesto a las agujas del reloj y luego volverá a aparecer.

Temas relacionados

Para obtener más información acerca de las animaciones CSS, consulta las siguientes fuentes de referencia:

 

 

Mostrar:
© 2014 Microsoft