Disable CSS transitions and animations… temporarily or permanently!

There’s a fairly easy way to diable all transformations, transitions and animations introduced in CSS3, which often are being used in a nasty way, just as Flash animations were used ten years ago and as .gif images were used twenty years ago.

This can be done purely in CSS, when disabling them permanently or with a little bit help from Javascript (actually jQuery or Zepto), when willing to disable them just for some time or event.

This article also show how to set styles for absolutely every element in document.

Permanent solution

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

You can, of course, mix any of above solutions into one.

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 transformations-, transitions- and animations-related styles will always be ignored by browser, when printing a web page. This should be obvious to anyone but turns out, that it isn’t.

Sources

Following pages were used by me to write this article:

• agragregra’s GitHub Gist: Turn OFF Animate.css on Mobile Devices,
• webonomic.nl: How to disable CSS transforms transistions and animations,
• Stack Overflow: What is the cleanest way to disable CSS transition effects temporarily.

Thanks to their author for providing these information and thanks to you for reading it! :>