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;
 }

Tags:

5 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 :).

Leave a Reply