If you’re using a CSS library that comes with animations by default it may be a pain to maintain a modified version of it without animations. It’s easier to write your own CSS to disable animations and transitions.

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:

1
2
3
4

* {
    animation: none;
    transition: none;
}

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

1
2
3
4

* {
    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:

1
2
3
4

*, *::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:

1
2
3
4
5
6

/* style.css */

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<!-- 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