How to Play and Pause CSS Animations with CSS Custom Properties

Let’s have a look CSS @keyframes animations, and specifically about how you can pause and otherwise control them. There is a CSS property specifically for it, that can be controlled with JavaScript, but there is plenty of nuance to get …

The post How to Play and Pause CSS Animations with CSS Custom Properties appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

https://css-tricks.com/how-to-play-and-pause-css-animations-with-css-custom-properties/

Erstellt 4y | 21.01.2021, 16:22:11


Melden Sie sich an, um einen Kommentar hinzuzufügen

Andere Beiträge in dieser Gruppe

Scroll-Driven Animations Inside a CSS Carousel

Hey, isn't there a fairly new CSS feature that works with scroll regions? Oh yes, that's Scroll-Driven Animations. Shouldn't that mean we can trigger an animation while scrolling through the items

15.05.2025, 14:40:06 | CSS tricks
This Isn’t Supposed to Happen: Troubleshooting the Impossible

What it looks like to troubleshoot one of those impossible issues that turns out to be something totally else you never thought of.


14.05.2025, 15:30:09 | CSS tricks
Using Pages CMS for Static Site Content Management

I know, I know: there are a ton of content management system options available, and while I've tested several, none have really been the one, y'know? Weird pricing models, difficult customization,

12.05.2025, 14:40:32 | CSS tricks
Orbital Mechanics (or How I Optimized a CSS Keyframes Animation)

What does it look like to refactor your own code? John Rhea picks apart an old CSS animation he wrote and walks through the thought process of optimizing it.


08.05.2025, 13:30:08 | CSS tricks
Why is Nobody Using the hwb() Color Function?

Okay, nobody is an exaggeration, but have you seen the stats for hwb()? They show a steep decline, and after working a lot on color in the CSS-Tricks almanac, I’ve just been wondering

07.05.2025, 14:10:09 | CSS tricks
GSAP is Now Completely Free, Even for Commercial Use!

Along with the version 3.13 release, GSAP, and all its awesome plugins, are now freely available to everyone.


06.05.2025, 14:50:06 | CSS tricks
Modern Scroll Shadows Using Scroll-Driven Animations

Using scroll shadows, especially for mobile devices, is a subtle bit of UX that Chris has covered before. Geoff covered a newer approach that uses the animation-timeline property. Here

05.05.2025, 13:20:16 | CSS tricks