How To Disable CSS Transforms, Transition, And Animations

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! CSS Transforms Transition Animations.

To disable CSS transitions permanently use following CSS code:

* {
    -o-transition-property: none !important;
    -moz-transition-property: none !important;
    -ms-transition-property: none !important;
    -webkit-transition-property: none !important;
    transition-property: none !important;
}

To disable CSS transformations use following instead:

* {
    -o-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -webkit-transform: none !important;
    transform: none !important;
}

And to disable CSS animations this one should do the trick:

* {
    -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.

Temporary approach

To disable animations, transitions, etc. just for some time, event or code execution period, first declare following class:

.disable-css-transitions {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

And then use it in Javascript (jQuery) code:

$someElement.addClass('disable-css-transitions');
doAnything();
$someElement[0].offsetHeight;
$someElement.removeClass('disable-css-transitions');

Part $someElement[0].offsetHeight; is to trigger a reflow and flush all the CSS changes.

Mobiles first

You can use media queries to disable all transformations, transitions, and animations in your document only for mobile devices (i.e. keep them untouched for regular computers):

@media only screen and (max-width : 768px) {
    * {
        ...
    }
}

All CSS Transforms Transition Animations related styles will always be ignored by the browser when printing a web page. This should be obvious to anyone but turns out, that it isn’t.

For more tutorials visit our How to section.

For the latest tech news and reviews, follow Geeknous on TwitterFacebook, and subscribe to our YouTube channel.

Geeknous Staff

Geeknous Staff

The resident bot. If you email me, a human will respond.

Leave a Comment