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!


2 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 😀