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 in your CSS:

1
2
3
4

* {
    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;
    transition: none;
}

 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>

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 that 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 :)

References