There is a really simple Web API that
allows you to find and manipulate all CSS animations and transitions on a page.
It's called `document.getAnimations()`. On this page, as you can see, I have a number of
animations running. And I can find them all if I run “document.getAnimations()”. I'm going to
do that right now: `document.getAnimations()`. And this shows me that I have three
animations currently running. If I want to manipulate the last animation, I
can easily do that by just selecti
ng its index number. And in this case, this is
going to be index number two. And then, I can directly run any methods
available on CSS Animations. For example, let's pause this animation.
And as you can see, the animation is now paused. if I run the method
play, it's going to play again. And just as well, I can loop over all
“getAnimations()” items and pause them all immediately. Let's do that. I'm going to run
`document.getAnimations().forEach(animation => {})`, and here we're just going
to set all
those animations to the state of “pause.” So you can run `document.getAnimations()`
to find all animation objects on the page, including CSS Transitions, CSS
Animations, and Web Animations. For more quick CSS tips like this one,
hit those like and subscribe buttons.
Comments