Como controlar as animações CSS com JavaScript

Quando se trata de animações na Web, os desenvolvedores precisam medir os requisitos da animação com a tecnologia certa: CSS ou JavaScript. Muitas animações podem ser gerenciadas com CSS, mas o JavaScript sempre oferecerá mais controle. Com document.getAnimationsno entanto, o senhor pode usar o JavaScript para gerenciar animações CSS!

O document.getAnimations retorna uma matriz de CSSAnimation objetos. CSSAnimation fornece uma série de informações sobre a animação: playState, timeline, effecte eventos como onfinish. O senhor pode então modificar esses objetos para ajustar as animações:

// Make all CSS animations on the page twice as fast
document.getAnimations().forEach((animation) => {
  animation.playbackRate *= 2;
});

// Stop all CSS animations on the page
document.getAnimations().forEach((animation) => {
  animation.cancel();
});

Como o ajuste das animações CSS em tempo real poderia ser útil para os desenvolvedores? Talvez usar o API da bateria para interromper todas as animações quando a bateria do dispositivo estiver fraca. Possivelmente para interromper as animações quando o usuário tiver rolado a tela para além da própria animação.

Adoro a maneira como o senhor pode usar o JavaScript para modificar as animações CSS. Os desenvolvedores costumavam ter que escolher entre CSS e JavaScript – agora temos as ferramentas para fazê-los trabalhar juntos!