Posted on Leave a comment

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 document.body.style.setProperty("--toggle", "1"); document.body.style.setProperty("--playState", "running");

Then get into using the media query to test for reduced motion off the bat, and storing the preferred value in localStorage.

Direct Link to ArticlePermalink

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

CSS-Tricks

Posted on Leave a comment

CSS Animations and Transitions in Email

We don’t generally think of CSS animations or transitions inside of email, or really any movement at all outside of an awkward occasional GIF. But there is really no reason you can’t use them inside HTML emails, particularly if you do it in a progressive enhancement-friendly way. Like, you could style a link with a hover state and a shaking animation, but if the animation (or even the hover) doesn’t work, it’s still a functional link. Heck, you can use CSS grid in email, believe it or not.

Jason Rodriguez just wrote Understanding CSS Animations in Email: Transitions and Keyframe Animations that covers some of the possibilities. On the supported list of email clients that support CSS transitions and keyframe animations is Apple Mail, Outlook, and AOL mail, among others.

Other things to look at:

The post CSS Animations and Transitions in Email appeared first on CSS-Tricks.

CSS-Tricks