Animation.playbackRate

La propiedad Animation.playbackRate de la Web Animations API devuelve o  establece la velocidad de reproducción de la animación.

Las animaciones tienen un playback rate que proporciona un factor de escala para el cambio de velocidad de la animación timeline (en-US) valores del estado actual de la linea de tiempo de la animación. La velocidad de reproducción inicial es 1.

var currentPlaybackRate = Animation.playbackRate;

Animation.playbackRate = newRate;

Toma un número que puede ser 0, negativo o positivo. Los valores negativos invierten la animación. El valor es un factor de escala, por lo que, por ejemplo, un valor de 2 duplicaría la velocidad de reproducción.

En el ejemplo Growing/Shrinking Alice Game , hacer click o tocar la botella, hace que la animación de crecimiento de Alicia  (aliceChange) se invierta para reducirse:

var shrinkAlice = function() {
  aliceChange.playbackRate = -1;
  aliceChange.play();
}

// Con un toque o un click, Alicia se encogerá.
bottle.addEventListener("mousedown", shrinkAlice, false);
bottle.addEventListener("touchstart", shrinkAlice, false);

Por el contrario, hacer click en el pastel hace que "crezca" reproduciendo aliceChange hacia adelante otra vez:

var growAlice = function() {
  aliceChange.playbackRate = 1;
  aliceChange.play();
}

// Con un toque o un click, Alicia crecerá.
cake.addEventListener("mousedown", growAlice, false);
cake.addEventListener("touchstart", growAlice, false);

En otro ejemplo,  Red Queen's Race Game, Alicia y La Reina Roja están ralentizandose constantemente:

setInterval( function() {

  // Asegúrate de que la velocidad de reproducción nunca descienda por debajo de .4

  if (redQueen_alice.playbackRate > .4) {
    redQueen_alice.playbackRate *= .9;
  }

}, 3000);

Pero hacer click o hacer tapping(pasar el puntero) sobre ellos hace que aceleren multiplicando su playbackRate(velocidad de reproducción):

var goFaster = function() {
  redQueen_alice.playbackRate *= 1.1;
}

document.addEventListener("click", goFaster);
document.addEventListener("touchstart", goFaster);

[1] La Web Animations API solo está habilitada por defecto en Firefox Developer Edition y Nightly builds. Puedes habilitarlo en versiones Beta y de lanzamiento estableciendo la preferencia dom.animations-api.core.enabled en true, y puedes deshabilitarlo en cualquier versión de Firefox estableciendo esta propiedad en false.

• Web Animations API
• Animation