See the Code - See it Full Page - See Details
CSS Variables (Custom Properties) again for the win... allowing you to control an individual value of a property that has multiple values at the same time. In this case our element has two keyframe animations, and I want to allow you to pause them separately. But since they are a part of an animation, the CSS will be: `animation-play-state: running, paused` To control them separately without CSS Variables, you will need to getComputedStyle, split the string value on the comma, change the correct index (CSS order will affect the JS code, as will the number of animations) to the new play state, and then set the `animationPlayState` on the `style`. With CSS Variables, we can boil this JS down to one or two lines. and not have much, if anything, to change in our JS if we decide to add more animations. As a bonus... added an `animationiteration` event listener to change the words. shshaw has forked this to show some other options that we have: Such as multiple classes with rules that set `animation-play-state` to each option (would grow exponentially as you add more animations, but still viable): http://codepen.io/shshaw/pen/pemaJZ http://codepen.io/shshaw/pen/gmJvPW
This Pen uses: HTML, CSS, JavaScript, and