How to disable CSS transforms, transistions and animations

{}
January 12th, 2012

Sick of too much eye-candy and is your browser slowing down due to all the shiny and inappropriate animations?

What don’t you disable all the CSS3 animations, CSS3 transforms and CSS3 transitions with one click and speed up your browsing experience!

Put this in your User-CSS stylesheet:

* {
/*CSS transitions*/
-o-transition-property: none !important;
-moz-transition-property: none !important;
-ms-transition-property: none !important;
-webkit-transition-property: none !important;
transition-property: none !important;
/*CSS transforms*/
-o-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
-webkit-transform: none !important;
transform: none !important;
/*CSS animations*/
-webkit-animation: none !important;
-moz-animation: none !important;
-o-animation: none !important;
-ms-animation: none !important;
animation: none !important;
}

Now you can check with one mouse click if animations or transforms on a page are javascript or CSS driven.

Easy debugging!

Update Nov 2017

Nowadays browser-prefixes can be dropped. And  XFCE Mouse made a comment to include ::before and ::after,which will stop animation in more cases.

*, :before, :after {
 /*CSS transitions*/
 transition-property: none !important;
 /*CSS transforms*/
 transform: none !important;
 /*CSS animations*/
 animation: none !important;
 }

Update Oct 2018
Thx tommasz86, indeed a star is not needed for pseudo-elements :after and :before. Should parse a little faster now ;). I agree commenting out transform is appropriate in most cases.

Still amazed this little user-style can save 40% CPU in Firefox 62 on pages with code like this:

.loader, .wheel {
background: url("../images/loader.svg") center center no-repeat;
webkit-animation: rotating 1.2s linear infinite;
animation: rotating 1.2s linear infinite;
}

Even when the .loader animation is not visible anymore!

Where are the days of good old Norwegian Opera (Presto) browser that could disable animations (including animated gifs) with a mouse click?

Tags:

10 Responses to “How to disable CSS transforms, transistions and animations”

  1. Ito Says:

    Thanks so much. It worked nicely for me. I was desperated looking for where I had to disable this “animations”, like as where is wally.

  2. Adriano Says:

    Tnks a lot! This code help me 😀

  3. XFCE Mouse Says:

    While this was certainly helpful, I ran into some sites where it didn’t work, e.g.
    http://www.pella.com/
    https://stephanwagner.me/only-css-loading-spinner

    And I found that I have to use *, :before, :after as the CSS selector instead of just * to override the animations that are defined using :before and :after, e.g.
    *, :before, :after {
    animation:none !important;
    }

    The CSS spinners on some pages hang my browser, so I had to find a way to get rid of all of them.
    Maybe you’d like to update the post, it seems to be a popular one.

  4. krystian3w Says:

    Broke google images.

  5. tommasz86 Says:

    From my testing, it is much safer to set them to `initial` or `unset` rather than `none`, since the latter breaks way too many websites to be useful. I would also leave `transform` alone, as changing its values breaks many sites too (e.g. Google Contacts).

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

    Also, there is no need for a star in `:before` and `:after`.

    @XFCE Mouse

    The two websites mentioned above do work with my settings :).

  6. TIL: CSS - Unset/reset transformations - Interrupt Driven Says:

    […] can unset transforms with: transform: none; https://dev.webonomic.nl/how-to-disable-css-transforms-transistions-and-animations min-height‘s default is 0 but max-height‘s default is none. Also, using an svg in an […]

  7. Samuel Says:

    On Firefox 62.0 with Windows 10, this kills foldable submenus of the hamburger menu, e.g. “Web Developer” or “Help”.

  8. webonomic Says:

    @Samuel. Probably Firefox killed the user style functionality, why on earth would a user style that is meant for webpages influence the UI of a program?
    Curious, how do you use it with Firefox? I don’t see your problem in Firefox 62 with the code added to ~profile/chrome/userContent.css

  9. Borja Says:

    Thanks a lot!!!

  10. krystian3w Says:

    how do you think about this:

    * { animation-duration:0s !important; animation-delay:0s !important; transition-duration: 0s !important; transition-delay:0s !important; }

    https://www.quora.com/Why-does-Chrome-use-so-much-memory/answer/William-Barath

Leave a Reply