My motivation behind this post was disabling button animations when using daisyUI on a side project.

Note:

I am not a CSS expert and there may be other ways of animating elements via CSS that I did not cover here. Also, this doesn’t help if elements are being moved around by JavaScript. But you can easily disable JavaScript for any site through your browser :)

To disable CSS animations and transitions you can try adding the following to your CSS:

* {
    animation: none;
    transition: none;
}

If that doesn’t work, try using !important:

* {
    animation: none !important;
    transition: none !important;
}

Animations may also be applied using the ::before and ::after pseudo elements. We can include those in the previous CSS:

*, *::before, *::after {
    animation: none !important;
    transition: none !important;
}

You can also put these into a CSS class and apply to HTML elements as needed if you still want animations in some places:

/* style.css */

.no-animations {
    animation: none !important;
    transition: none !important;
}

<!-- index.html -->

<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
     <!-- add a class to whatever elements you want -->
     <button class="no-animations" type="button">No Animations on this Button</button>

     <button type="button">Animations are ok here</button> 
  </body>
</html>

References

• https://stackoverflow.com/questions/11131875/what-is-the-cleanest-way-to-disable-css-transition-effects-temporarily
• https://stackoverflow.com/questions/31576156/what-does-animationnone-do-exactly
• https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/animation
• https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/transition

For example, try reloading this page with JavaScript disabled and you’ll see a new message below:

The HTML for the message above looks like this:

<noscript>
    <blockquote>This message only shows up when JavaScript is disabled!</blockquote>
</noscript>

Here’s an example where CSS styles within <noscript> tags are applied when JavaScript is disabled. Try reloading this page without JavaScript and the message below will be italicized.

The text within this blockquote element is italicized when JavaScript is disabled!

And this is what the HTML and CSS looks like for the example above:

<noscript>
    <style>
        blockquote#example {
            font-style: italic;
        }
    </style>
</noscript>

<blockquote id="example">The text within this blockquote element is italicized when JavaScript is disabled!</blockquote>

References

• https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/noscript

For example, if buttons have animations when they’re clicked like this:

button:active {
  transform: translateY(4px);
}

We can disable those animations if a user has enabled reduced motion on their device by using the prefers-reduced-motion media query like this:

@media (prefers-reduced-motion) {
    /* anything in here will apply on devices with reduced motion enabled */
    button:active {
        transform: none;
    }
}

Technically, the CSS being applied under prefers-reduced-motion doesn’t need to be related to motions or animations. It’s possible to do other things, like changing the background color, if a user prefers reduced motion. So something like this is possible too:

body {
  background-color: red;
}

@media (prefers-reduced-motion) {
    body {
        background-color: blue;
    }
}

The Mozilla docs cover how to enable reduced motion on several browsers:

• https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion

References

• https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media
• https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion
• https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Media_queries/Using