Animaciones CSS tips y trucos

Corriendo una animacin de nuevo

La especificacin de CSS Animations no ofrece una forma de ejecutar una animacin nuevamente. No hay un mtodo mgico de resetAnimation() en los elementos, y tu no puedes solo configurar el elemento animation-play-state para "correr" de nuevo. En su lugar debes usar trucos inteligentes para que una animacin detenida se reproduzca.

Aqu te mostramos una forma de hacerlo que sentimos es lo suficientemente estable y confiable para sugerirte

Contenido HTML

Primero, definamos el HTML para un <div> que deseamos animar y un botn que ejecurara (o repetira) la animacin.

<div class="box"></div>

<div class="runButton">Click me to run the animation</div>

Contenido CSS

Ahora definiremos la animacin en si usando CSS. Algn CSS que no es importante (el estilo del botn "Run" en s) no se muestran aqu, por brevedad.

.runButton {
  cursor: pointer;
  width: 300px;
  border: 1px solid black;
  font-size: 16px;
  text-align: center;
  margin-top: 12px;
  padding-top: 2px;
  padding-bottom: 4px;
  color: white;
  background-color: darkgreen;
  font:
    14px "Open Sans",
    "Arial",
    sans-serif;
}

@keyframes colorchange {
  0% {
    background: yellow;
  }
  100% {
    background: blue;
  }
}

.box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

.changing {
  animation: colorchange 2s;
}

Aqu hay dos clases. La clase "box" es un descripcin bsica de la apariencia de la caja, sin ninguna informacin de la animacin incluida. Los detalles de la animacin son incluidos en la clase "changing" class, que dice que @keyframes llamado "colorchange" debe usarse en el transcurso de dos segundo para animar la caja.

Note que debido a esto, la caja no comienza con ningn efecto de animacin en su lugar, por lo que no se animar

Contenido JavaScript

Ahora veremos el JavaScript que jace el trabajo. La escencia de la tcnica esta en la funcin play(), que se llama cuando el usuario hace clic en el botn "Run".

function play() {
  document.querySelector(".box").className = "box";
  window.requestAnimationFrame(function (time) {
    window.requestAnimationFrame(function (time) {
      document.querySelector(".box").className = "box changing";
    });
  });
}

Esto se ve raro, cierto? Esto se debe a que la nica forma de volver a reproducir una animacin es eleminar el efecto de animacin, dejar que el documento vuelva a calcular los estilos para que sepa que lo ha hecho y luego volver a agregar el efecto de animacin al elemento. Para que eso suceda, tenemos que ser creativos.

Esto es lo que sucede cuando la funcin play() es llamada:

1. La lista de clases CSS de caja se restablece a "box". Esto tiene el efecto de remover cualquier otra clase recurrente aplicada a la caja, incluida la clase "changing" que controla la animacin. En otras palabras eliminaremos el efecto de animacin de la caja. Sin embargo, los cambios en la lista de clases no tienen efecto hasta que se recalcula completamente el estilo y se ha producido una actualizacin para reflejar el cambio.
2. Para estar seguros que los estilos son recalculados, nosotros usamos window.requestAnimationFrame(), especifinado un callback. Nuestro callback se ejecuta justo antes del 'repaint' del documento. El problema para nosotros es que debido a que es antes del repaint, El recalculo del estilo an no ha suciedo! Por lo tanto...
3. Nuestro callback habilmente llama a requestAnimationFrame() por segunda vez!. En este momento el callback se compila antes del siguiente repaint, despus de que se haya producido el recalculo del estilo. El callback aade la clase "changing" de nuevo en la caja, para que el repaint inicie la animacin una vez ms.

Por supuesto, tambin necesitamos agregar un controlador de eventos a nuestro botn "Run" para que en verdad haga algo

document.querySelector(".runButton").addEventListener("click", play, false);

Resultado

Detener la animacin

Simplemente removemos animation-name aplicado al elemento que hace que eso salte o corte a su siguiente estado.Si, en cambio, desea que la animacin se complete y luego se detenga, debe probar un enfoque diferente. Los principales trucos son:

1. Haga que su animacin sea lo ms autnoma posible. Esto significa que no se debe confiar en animation-direction: alternate. En su lugar, debe escribir explcitamente una animacin de fotogramas clave que pase por la animacin completa en una repeticin hacia adelante.
2. Use JavaScript y borre la animacin que se esta utilizando cuando se activa el evento animationiteration.

El siguiente demo muestra como puedes lograr las tcnicas JavaScript mencionandas anteriormente:

.slidein {
  animation-duration: 5s;
  animation-name: slidein;
  animation-iteration-count: infinite;
}

.stopped {
  animation-name: none;
}

@keyframes slidein {
  0% {
    margin-left: 0%;
  }
  50% {
    margin-left: 50%;
  }
  100% {
    margin-left: 0%;
  }
}

<h1 id="watchme">Click me to stop</h1>

let watchme = document.getElementById("watchme");

watchme.className = "slidein";
const listener = (e) => {
  watchme.className = "slidein stopped";
};
watchme.addEventListener("click", () =>
  watchme.addEventListener("animationiteration", listener, false),
);

Demo https://jsfiddle.net/morenoh149/5ty5a4oy/

Mira tambin

• Using CSS transitions
• Window.requestAnimationFrame()