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:

4 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.

Leave a Reply