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?
