Animaciones

Internet Explorer 10 y las aplicaciones de la Tienda Windows con JavaScript admiten animaciones de Hojas de estilo CSS. Las animaciones CSS permiten crear aplicaciones visualmente atractivas con experiencias sencillas, fluidas y animadas.

El World Wide Web Consortium (W3C) define estas animaciones en la especificación de animaciones CSS.

Las animaciones se parecen a las transiciones en que animan elementos a medida que cambian de posición, de tamaño, de color y de opacidad, y a medida que giran, se escalan, se trasladan, etc. De la misma manera que puedes hacerlo con las transiciones, puedes especificar funciones de temporización para controlar la velocidad de la progresión de una animación.

Sin embargo, con las animaciones de Hojas de estilo CSS, nivel 3 (CSS3) también puedes usar fotogramas clave, que especifican los valores de las propiedades de animación en varios puntos durante la misma. De este modo, puedes definir el comportamiento de una animación, no solo al principio o al final, sino también en el medio. Las animaciones también pueden tener iteraciones y la funcionalidad de invertir su dirección, y se les puede proporcionar la capacidad de pausa y reanudación.

Como podrías esperar, las animaciones CSS3 ofrecen infinitas posibilidades para crear experiencias ricas y atractivas. Este tema proporciona una introducción breve acerca de cómo crear una animación CSS en Internet Explorer 10 y en aplicaciones de la Tienda Windows con JavaScript, y muestra un ejemplo práctico de animaciones CSS3.

Antes, las propiedades, las reglas arroba y los eventos descritos en este tema requerían un prefijo de proveedor específico de Microsoft, "-ms-", para funcionar con Internet Explorer 10 y las aplicaciones de la Tienda Windows con JavaScript. Este prefijo ya no es necesario pero aún se reconoce. Para garantizar la compatibilidad en el futuro, las aplicaciones que usan el prefijo de proveedor de Microsoft con propiedades de animación deben actualizarse como corresponda.

Para ver una lista de propiedades CSS que puedes animar, consulta las propiedades de animación y transición.

Creación de una animación

Puedes crear una animación en tres pasos básicos:

1. Especificar las propiedades de la animación.
2. Crear los fotogramas clave.
3. Aplicar la animación a uno o más elementos.

Especificar las propiedades de la animación

Primero debes especificar las propiedades de la animación desde el selector que corresponda al elemento que deseas animar. En esta sección se describen las propiedades de la animación.

La propiedad animation-name

La propiedad animation-name especifica los identificadores de animación (es decir, el "nombre" que hayas asignado a la animación determinada). Un identificador de animación selecciona una regla arroba @keyframes de CSS. Aquí mostramos la sintaxis:

PropiedadDescripción

animation-name

Especifica uno o más identificadores de animación. Las animaciones se identifican con la regla arroba @keyframes de CSS.

 

La propiedad animation-duration

La propiedad animation-duration especifica el tiempo que tarda en completarse un ciclo de la animación. Aquí mostramos la sintaxis:

PropiedadDescripción

animation-duration

Indica uno o más valores de tiempo separados por comas; cada uno indica la duración de un ciclo completo de la animación. Cada valor lleva el formato de un número de punto flotante seguido de un designador de unidad de tiempo (ms o s). Esta propiedad acepta valores negativos.

 

La propiedad animation-timing-function

La propiedad animation-timing-function describe cómo se calcularán los valores de propiedad intermedios que se usan durante un único ciclo de la animación para que esta cambie de velocidad a lo largo de su duración. Para ello, debes especificar una función de temporización de animación basada en una curva de Bézier cúbica, que usa cuatro parámetros. Puedes especificar una función de temporización para toda la animación o para fotogramas clave individuales.

Para especificar la curva de manera explícita, puedes usar la función cubic-bezier y escribir los cuatro valores manualmente. También puedes elegir entre distintas palabras claves de funciones, cada una de las cuales se corresponde con una función de temporización de uso frecuente. La sintaxis de la propiedad se muestra aquí:

PropiedadDescripción

animation-timing-function

Especifica una o más funciones de temporización separadas por comas que definen los valores de propiedad intermedios que se usan durante un solo ciclo de la animación. La animación se calcula sobre un conjunto de las propiedades de objeto correspondientes identificadas en la regla arroba @keyframes de CSS especificada por la propiedad animation-name. Los valores posibles pueden ser cualquiera de los siguientes. Consulta al página de referencia de animation-timing-function para obtener la descripción de cada función.

cubic-bezier(x1,y1,x2,y2)

Los cuatro parámetros de esta función deben ser valores de punto flotante entre el 0 y el 1, inclusive. Los valores corresponden a las coordenadas x e y de los puntos P1 y P2 de la curva de Bézier cúbica. Para otras propiedades que no sean opacity ni color, la función de curva cubic-bezier acepta las coordenadas y fuera del rango estándar de 0 y 1. Esto te permitirá crear efectos de transición "elásticos" o de "rebote".

ease

Este es el valor inicial. Esta función de temporización aumenta gradualmente la velocidad al principio, anima a toda velocidad y, gradualmente, disminuye la velocidad hacia el final.

linear

Esta función de temporización mantiene la misma velocidad de principio a fin.

ease-in

Esta función de temporización aumenta gradualmente la velocidad al principio.

ease-out

Esta función de temporización disminuye gradualmente la velocidad al final.

ease-in-out

Esta función de temporización aumenta gradualmente la velocidad al principio y, gradualmente, disminuye la velocidad hacia el final.

steps

Esta función de temporización define un ritmo escalonado y requiere dos parámetros. El primer parámetro determina la cantidad de intervalos y el segundo parámetro opcional determina el punto en el intervalo donde cambia el valor de la propiedad. El segundo parámetro está limitado al valor de start o end, que es el predeterminado.

 

La propiedad animation-iteration-count

La propiedad animation-iteration-count define el número de veces que se reproduce un ciclo de animación. La sintaxis de la propiedad se muestra aquí:

PropiedadDescripción

animation-iteration-count

Define la cantidad de veces que se reproduce un ciclo de animación. Los diferentes valores se separan con comas.

<number>

La cantidad de veces que se reproduce un ciclo de animación. Puedes especificar un número no entero y la animación finalizará en algún momento durante el ciclo. El valor inicial es "1".

infinite

La animación se repite indefinidamente.

Si se especifica un valor negativo o "0", no se aplicarán animaciones.

Puedes usar la propiedad animation-iteration-count con la propiedad animation-direction establecida en alternate, lo que hace que la animación se reproduzca a la inversa en ciclos alternos.

 

La propiedad animation-direction

La propiedad animation-direction especifica la dirección de reproducción de un ciclo de animación. La sintaxis de la propiedad se muestra aquí:

PropiedadDescripción

animation-direction

Define si la animación debe reproducirse a la inversa en ciclos alternos. Esta propiedad puede establecerse en uno o varios de los siguientes valores separados por comas:

normal

Este es el valor inicial. Indica que la animación no se reproducirá a la inversa en ciclos alternos.

reverse

Este valor indica que los ciclos de animación se reproducen en dirección inversa a la dirección en la que se especificaron.

alternate

Este valor indica que la reproducción de los ciclos de animación puede ser hacia delante (iteraciones impares) y hacia atrás (iteraciones pares).

alternate-reverse

Este valor indica que la reproducción de los ciclos de animación puede ser hacia atrás (iteraciones impares) y hacia delante (iteraciones pares).

 

La propiedad animation-play-state

La propiedad animation-play-state especifica si una animación se está reproduciendo o está en pausa. Esta propiedad puede ser útil para crear un mecanismo que permita al usuario pausar una animación. La sintaxis de la propiedad se muestra aquí:

PropiedadDescripción

animation-play-state

Define si la animación está en reproducción o en pausa. Esta propiedad puede establecerse en uno o varios de los siguientes valores separados por comas:

paused

Detiene una animación en reproducción. La animación seguirá mostrando su valor actual en estado estático, como si el tiempo de la animación fuera constante.

running

Reanuda la reproducción de una animación en pausa. La animación se reanuda desde el valor actual.

 

La propiedad animation-delay

La propiedad animation-delay define cuándo comenzará una animación y permite que esta comience un tiempo después de que se aplique. Aquí mostramos la sintaxis:

PropiedadDescripción

animation-delay

Especifica uno o más valores de desplazamiento separados por comas dentro de una animación (el tiempo desde el principio de la animación) antes de que la animación se muestre para un conjunto de propiedades de objeto correspondientes. Cada valor lleva el formato de un número de punto flotante seguido de un designador de unidad de tiempo (ms o s).

  • El valor inicial es "0", e indica que la animación se ejecutará tan pronto se aplique.
  • Un valor negativo indica que la animación se ejecutará tan pronto se aplique, pero aparecerá como si la reproducción se hubiera iniciado en el desplazamiento indicado o durante su ciclo de reproducción.

 

La propiedad animation-fill-mode

La propiedad animation-fill-mode define si los efectos de una animación son visibles antes o después de que se reproduzca. De forma predeterminada, una animación no afecta a los valores de propiedad en el tiempo que transcurre entre su aplicación y su ejecución (durante los retrasos definidos por la propiedad animation-delay). Además, de forma predeterminada, una animación no afecta a los valores de propiedad después de que finalice (después de que transcurra el tiempo definido por la propiedad animation-duration). La propiedad animation-fill-mode se usa para invalidar estos comportamientos predeterminados. Aquí mostramos la sintaxis:

PropiedadDescripción

animation-fill-mode

Especifica uno o más valores separados por comas que definen el comportamiento de la animación fuera de su tiempo de ejecución. Pueden configurarse cualquiera de los siguientes valores:

none

El comportamiento predeterminado no se modifica.

forwards

El último valor de propiedad (definido en el último fotograma clave) se conserva después de completarse la animación.

backwards

El valor de propiedad inicial (definido en el primer fotograma clave) se aplica antes de que se muestre la animación, durante el período definido por animation-delay.

both

Se aplican ambos modos de relleno hacia delante y hacia atrás.

 

La propiedad animation

La propiedad abreviada animation combina seis de las propiedades de animación en una sola propiedad. Aquí mostramos la sintaxis:

PropiedadDescripción

animation

Especifica uno o más conjuntos de propiedades de animación delimitadas por espacios para un conjunto de propiedades de objeto correspondientes. Los valores de propiedad de animación deben establecerse en el siguiente orden:

Si tienes más de un conjunto de seis propiedades de animación, debes separar cada conjunto con una coma.

 

Considera la siguiente muestra de código, que define varias propiedades de animación en un elemento div.


div {
  animation-name: myAnimation;
  animation-duration: 3s;
  animation-timing-function: ease-out;
  animation-delay: -1s;
  animation-iteration-count: 2;
  animation-direction: normal;
}


Con la propiedad abreviada animation, puedes especificar estas seis propiedades en solo una línea, tal y como se muestra aquí:


div {
  animation: myAnimation 3s ease-out -1s 2 normal;
}


Crear fotogramas clave

A continuación, especifica los fotogramas clave de tu animación. Los fotogramas clave te permiten controlar con precisión los valores intermedios en una animación. La regla @keyframes especifica una lista de fotogramas clave de propiedades de la animación para un objeto, y especifica un identificador para la animación. Aquí mostramos la sintaxis:

ReglaDescripción

@keyframes

Una lista de fotogramas clave de propiedades de la animación para un objeto en el documento HTML. Esta regla se usa para especificar valores de propiedad en diferentes puntos durante la animación, como así también un identificador para la animación. Especifica los valores de propiedad durante un ciclo de la animación. (La animación puede iterar una o varias veces).

Esta regla usa selectores de fotogramas clave para especificar los valores de propiedad en diversas etapas de la animación. Los selectores de fotogramas clave pueden declarase como from (equivalente a 0%), to (equivalente a 100%) y uno o más porcentajes.

 

El siguiente ejemplo muestra tres selectores de fotogramas clave, cada uno con dos descriptores de fotograma clave.


@keyframes myAnimation {
  from {     
    left: 100px;
    right: 50px;  
  } 
  40% {      
    left: 50px;
    right: 10px; 
  }
  to {         
    left: 10px;
    right: 10px;
  }
}

En este ejemplo, se especifican fotogramas clave para tres puntos durante la animación: el principio (el valor from, o 0%), 40% y el final (el valor to, o 100%).

También puedes especificar la función de temporización que se usará a medida que la animación avanza al siguiente fotograma clave. Simplemente incluye la propiedad animation-timing-function en el selector de fotograma clave apropiado.

Aplicar la animación

Por último, debes aplicar el estilo de animación a un elemento. Por lo general, se desencadena mediante un evento, como un clic de botón (o pulsación). Ten en cuenta que una animación de CSS no puede interrumpirse cambiando los valores de propiedad de la animación, como sucede con las transiciones. Una animación CSS solo puede interrumpirse con la propiedad animation-play-state o agregando o quitando el nombre de la animación.

Cuando la animación se completa, las propiedades de la animación vuelven a los valores originales.

Ejemplo

El ejemplo siguiente muestra una animación de CSS. Fue creada con la demo Práctica: animaciones de la Versión de prueba de IE.

Para comenzar, crearemos un elemento div con texto y le aplicaremos algunos estilos:


<!DOCTYPE html>
<html lang="en-us">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<style type="text/css">
body {
  padding:10px;
  font:bold 20pt "Segoe UI";
}
div {
  width:250px; 
  background-color:lime;
  padding:10px;
}
</style>
</head>
<body>
<div>
Duis ac leo sit amet lectus tristique pulvinar nec rutrum dolor. Etiam sed ipsum enim,
vitae euismod odio. Suspendisse eu.
</div>
</body>
</html>


Para ver cómo queda configurado el código, consulta esta página.

Ahora definamos algunos parámetros para la animación. Agregaremos un selector en la sección style que usa la seudoclase :active. Esto significa que la animación se ejecutará mientras el usuario hace clic y mantiene presionado (o pulsa y mantiene presionado) el bloque de texto. La animación continúa hasta el final.

Para asegurarnos de que la animación comenzará de inmediato, que durará 5 segundos, que se repetirá una vez (para un número total de 2 iteraciones), y que se identificará con el nombre "demo", agregaremos el siguiente selector:


...
div:active {
  animation-delay: 0s;
  animation-duration: 5s;
  animation-iteration-count: 2;
  animation-name: demo;
}
...

Ahora crearemos tres fotogramas clave—uno para el principio, otro para el medio y otro para el final. En cada fotograma clave, definiremos las dos propiedades de funciones de cambio y tiempo para definir la velocidad del cambio.


@keyframes demo {
  from {
    animation-timing-function: ease;
  }
  50% {
    background-color: purple;
    animation-timing-function: ease-in;
    transform: translate(20px,30px);
  }
  to {
    background-color: blue;
  }
}

Hemos definido dos propiedades para la animación, background-color y transform. A lo largo de un ciclo único de animación, el color de fondo del elemento div se anima desde el lima (color original) hasta el púrpura y, a continuación, el azul. El elemento div también se mueve a la derecha y abajo, 20 y 30 píxeles respectivamente y, a continuación, vuelve atrás. La animación usa la función de temporización ease para animar desde el principio hasta el punto intermedio (el fotograma clave al 50%) y, a continuación, la función de temporización ease-in para animar desde el punto intermedio hasta el final. La animación se repite una vez.

Ver esta animación. (Se necesita Internet Explorer 10).

Eventos de DOM para animaciones

Internet Explorer 10 y las aplicaciones de la Tienda Windows con JavaScript definen tres eventos del Document Object Model (DOM) para animaciones:

animationstart

El evento 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

El evento animationend se produce cuando termina la animación.

animationiteration

El evento animationiteration se produce al final de cada iteración de una animación. Este evento solo se produce cuando la propiedad animation-iteration-count es mayor que uno.

  • Burbujas: Sí
  • Cancelable: Sí

En este ejemplo se genera una animación de un elemento <div> y se activan los eventos animationend, animationend y animationiteration para cambiar el texto del cuadro. Prueba el ejemplo disponible en línea.


<!DOCTYPE html>
<html lang="en-us">
<head>
  <title>CSS Animation Events Example</title>
<style>
  body {
    padding:10px;
    font-family:"Segoe UI";
  }
  div {
    width:250px; 
    background-color:lime;
    padding:10px;
    font-weight:bold;
    font-size:20pt;
  }
  div:active {
    animation-delay: 0s;
    animation-duration: 3s;
    animation-iteration-count: 2;
    animation-name: demo;
  }
  @keyframes demo {
    from {
    animation-timing-function: ease;
    }
    50% {
      background-color: purple;
      animation-timing-function: ease-in;
      transform: translate(20px,30px);
    }
    to {
      background-color: blue;
    }
  }
</style>
</head>
<body>
  <h1>CSS Animation Events Example</h1>
    <p>Click and hold to start the animation. Internet Explorer 10 or later required.</p>
    <div id="mydiv">
      Duis ac leo sit amet lectus tristique pulvinar nec rutrum dolor. Etiam sed ipsum enim, vitae euismod odio. Suspendisse eu.
    </div>

    <script>
      var divObj = document.getElementById("mydiv");
      divObj.addEventListener("animationstart", function (
      ) {
       this.innerHTML = "This is the animation start event";
      }, false);

      divObj.addEventListener("animationend", function () {
        this.innerHTML = "This is the animation end event";
      }, false);

      divObj.addEventListener("animationiteration", function () {
        this.innerHTML = "This is the animation iteration event";
      }, false);

    </script>


</body>
</html>


Referencia de API

Animations

Ejemplos y tutoriales

Cómo hacer que tu página web cobre vida con transformaciones, transiciones y animaciones CSS

Demostraciones de la versión de prueba de Internet Explorer

Hands On: Animations
Conseguir que las páginas cobren vida con animaciones y transformaciones CSS
Beta Fish IE

Publicaciones de IEBlog

Agregar personalidad con animaciones y transiciones CSS3
Animaciones de página completa con CSS
Transformaciones 3D de CSS3 en IE10

Especificación

Animaciones CSS

Temas relacionados

Lograr aplicaciones increíbles con animaciones CSS3
Animación CSS3 con reservas de jQuery

 

 

Mostrar:
© 2014 Microsoft