How to Control CSS Animations with JavaScript

By  on  

When it comes to animations on the web, developers need to measure the animation's requirements with the right technology -- CSS or JavaScript. Many animations are manageable with CSS but JavaScript will always provide more control. With document.getAnimations, however, you can use JavaScript to manage CSS animations!

The document.getAnimations method returns an array of CSSAnimation objects. CSSAnimation provides a host of information about the animation: playState, timeline, effect, and events like onfinish. You can then modify those objects to adjust animations:

// 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();
});

How could adjusting CSS animations on the fly be useful to developers? Maybe use the Battery API to stop all animations when the device battery is low. Possibly to stop animations when the user has scrolled past the animation itself.

I love the way you can use JavaScript to modify CSS animations. Developers used to need to choose between CSS and JavaScript -- now we have the tools to make them work together!

Recent Features

  • By
    39 Shirts – Leaving Mozilla

    In 2001 I had just graduated from a small town high school and headed off to a small town college. I found myself in the quaint computer lab where the substandard computers featured two browsers: Internet Explorer and Mozilla. It was this lab where I fell...

  • By
    5 HTML5 APIs You Didn’t Know Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

Incredible Demos

Discussion

  1. Jeff Madden

    Wow! I had no idea you could do that! Is getAnimations in an experimental stage? Are most browsers supporting it?

    I use CSS animations a lot! One area where I found frustration was using CSS transform(rotate) combined with transitions. I was building a clock and wanted a smooth motion feel in the clock hands, so transitions were my goal. However, I found that when you try to rotate an element from 360 degrees back to 0 degrees, CSS transitions have to rotate the element in the opposite direction! This was an obviously ugly effect for a clock because clock hands don’t do that! I tried using setTimeout on my animations but that just caused an ugly scenario of setTimeout hell. I tried all sorts of workarounds, but I hate those and none of them seemed to work anyway. Finally, I decided the only way was to create my own transition effects with javascript. This solved my ugly animation problem of rewinding clock hands to return to 0 degrees rotation.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!