DEV Community


Discussion on: Pausing GIF animations on for those who `prefer-reduced-motion` [hack 1]

link2twenty profile image
Andrew Bone

SVGs have a built in function called pauseAnimations, and also unpauseAnimations, which allows you to stop an animation in its tracks.

Suspends (i.e., pauses) all currently running animations that are defined within the SVG document fragment corresponding to this <svg> element, causing the animation clock corresponding to this document fragment to stand still until it is unpaused.

Here's a very basic demo

inhuofficial profile image
InHuOfficial Author

Well that solves SMIL and I was today years old when I learned about SVG pauseAnimations!

I was thinking about it and would the following not work for CSS applied animations in 99% of circumstances (I know a more specific selector with !important would obviously slip through but other than that I think it would work?)?

svg *{
    transition-property: none !important;
    transition-duration: 0s !important;
    animation: none !important;
    animation-duration: 0s !important;
    animation-iteration-count: 0 !important;
Enter fullscreen mode Exit fullscreen mode