w3.unpo<code>todo

@keyframes continuación

Además de nombre ( animation-name ) y duración ( animation-duration ), ambas imprescindibles ( required ) también podemos utilizar una de estas propiedades opcionales:

animation-delay ( demora )

animation: nombre duración función-de-temporizador demora número-de-iteraciones dirección fill-mode estado-de-la-animación;

Define cuando tiene que empezar la animación. Por defecto la animación empieza enseguida. Si el valor de la propiedad animation-delay: 1s, la animación empezará un segundo más tarde. Podemos especificar la demora en segundos ( s ) o milisegundos ( ms )

animation-iteration-count ( número-de-iteraciones )

animation: nombre duración función-de-temporizador demora número-de-iteraciones dirección fill-mode estado-de-la-animación;

Su valor puede ser un número, representando cuantas veces tiene que repetirse la animación, o, como ya hemos visto, la palabra clave infinite si queremos que la animación se repita indefinidamente. El valor por defecto de animation-iteration-count es 1 ( la animación pasa una sola vez ).

animation-direction ( dirección )

animation: nombre duración función-de-temporizador demora número-de-iteraciones dirección fill-mode estado-de-la-animación;

La propiedad animation-direction define si la animación debe reproducirse hacia delante ( normal ), hacia atrás ( reverse ) o en ciclos alternos ( alternate y alternate-reverse ). Puede tomar uno de estos valores:

animation-direction: normal | reverse | alternate | alternate-reverse;

En el siguiente ejemplo queremos animar el circulo rojo. Será una animación sencilla, con solo dos fotogramas.

@keyframes direction {
       0% {transform:translateX(0);}
       100% {transform:translateX(300px);}
      }

Queremos que la animación dure 1 segundo y que se repita 2 veces. Si utilizamos una declaración CSS abreviada podemos escribir:

animation: direction 1s ease-in-out 2;

No se olvide: la declaración abreviada establece todas las propiedades de la animación en una sola declaración, y tiene este aspecto:

animation: nombre duración función-de-temporizador demora número-de-iteraciones dirección fill-mode estado-de-la-animación;

Ejemplo animation-direction

animation-fill-mode

animation: nombre duración función-de-temporizador demora número-de-iteraciones dirección fill-mode estado-de-la-animación;

La propiedad animation-fill-mode especifica como debe comportarse el elemento antes y después de la animación, y puede tomar uno de estos valores:

animation-fill-mode: none | forwards | backwards | both;

Si animation-fill-mode: none, el elemento vuelve al punto de partida.  Este es el comportamiento por defecto.
Si animation-fill-mode: forwards el elemento se queda en el punto donde acabó la animación.

En los siguientes ejemplos existe una demora ( animation-delay ) de 1 segundo.

animation: nombreAnimacion 5s linear 1s 1 normal backwards ;

Y la animación empieza a 100px del punto de origen del elemento.

  @keyframes nombreAnimacion {  
  0% {transform:translateX(100px) rotate(100deg);}
  10% {transform:translateX(-80px) rotate(-80deg);}
  90% {transform:translateX(360px) rotate(360deg);}
  100% {transform:translateX(360px) rotate(360deg);}
  }

Haz clic en la "pelota" para que empiece la animación. Haz clic en el boton reestablecer y de nuevo en la "pelota" para ver de nuevo la animación.

Ejemplo animation-fill-mode

Normalmente aplicamos animation-fill-mode: backwards  si existe una demora ( animation-delay ) ya que en este caso animation-fill-mode controla el comportamiento del elemento antes de que empiece la animación.

En este caso si animation-fill-mode: backwards, el elemento se desplaza en el primer momento hasta el punto donde empieza la animación, y pasado un segundo la animación empieza.

Si, en el mismo caso, animation-fill-mode: none, pasado el tiempo de demora ( 1s ) el elemento se desplaza 100px hasta el punto donde empieza la animación, y la animación empieza enseguida.

El valor  both ( animation-fill-mode: both ) controla el comportamiento del elemento tanto antes como después de la animación.

Haz clic en la "pelota" para que empiece la animación. Haz clic en el boton reestablecer y de nuevo en la "pelota" para ver de nuevo la animación.

Ejemplo animation-fill-mode

animation-timing-function ( función de temporizador de la animación )

animation: nombre duración función-de-temporizador demora número-de-iteraciones dirección fill-mode estado-de-la-animación;

La propiedad animation-timing-function ( función de temporizador de la animación ) especifica la curva de velocidad de la animación y puede tomar uno de estos valores:

animation-timing-function:
linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n)

linear:
el efecto de transición pasa con la misma velocidad de principio a fin (equivalente a: cubic-bezier(0,0,1,1))
ease:
la transición es lenta al inicio, después rápida, después lenta de nuevo (equivalente a: cubic-bezier(0.25,0.1,0.25,1))
ease-in:
la transición es lenta al inicio (equivalente a: cubic-bezier(0.42,0,1,1))
ease-out:
la transición es lenta al final(equivalente a: cubic-bezier(0,0,0.58,1))
ease-in-out:
la transición es lenta al inicio y al final (equivalente a: cubic-bezier(0.42,0,1,1))

Si no especificada, la función de temporizador toma por defecto el valor de ease.
En el siguiente ejemplo la curva bézier utilizada para el último elemento es: cubic-bezier(0.680, 0, 0.265, 1)

Ejemplo animation-timing-function

animation-play-state ( el estado de la animación )

animation: nombre duración función-de-temporizadordemora número-de-iteraciones dirección fill-mode estado-de-la-animación ;

La propiedad animation-play-state ( el estado de la animación ) especifica si la animación está en ejecución ( running ) o en pausa ( paused ). Esta propiedad puede ser muy útil si queremos dar al usuario la posibilidad de parar y reanudar la animación.

Ejemplo animation-play-state