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"–toggle", "0");"–playState", "paused");

// play animation

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