«
»

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:

This entry was posted on Thursday, January 12th, 2012 at 2:08 pm and is filed under CSS3, Webtechnology. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

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

  1. Ito Says:
    January 22nd, 2014 at 3:36 pm

    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:
    June 25th, 2014 at 9:54 pm

    Tnks a lot! This code help me 😀

  3. XFCE Mouse Says:
    November 30th, 2017 at 6:22 pm

    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:
    December 1st, 2017 at 12:22 pm

    Broke google images.

  5. tommasz86 Says:
    March 9th, 2018 at 11:13 am

    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:
    July 11th, 2018 at 3:55 am

    […] 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:
    September 20th, 2018 at 9:54 am

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

  8. webonomic Says:
    October 19th, 2018 at 3:27 pm

    @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:
    February 2nd, 2019 at 2:14 pm

    Thanks a lot!!!

  10. krystian3w Says:
    November 15th, 2019 at 9:05 pm

    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