Toggling Animations On and Off

A nicely detailed tutorial by Kirupa that gets into how you might provide a UI with persisted options that control whether animations run or not.
The trick is custom properties that control the movement:
body {
–toggle: 0;
–playState: “paused";
}
Which are used within animations and transitions:
.animation {
animation: bobble 2s infinite;
animation-play-state: var(–playState);
}

.transition {
transition: transform calc(var(–toggle) * .15s) ease-in-out;
}

And toggle-able by JavaScript:
// stop animation
document.body.style.setProperty("–toggle", "0");
document.body.style.setProperty("–playState", "paused");

// play animation

… Read article
The post Toggling Animations On and Off appeared first on CSS-Tricks.

Link: https://www.kirupa.com/html5/toggling_animations_on_off.htm