How To Disable CSS Transforms, Transitions, And Animations

Sick of too much eye candy and is your browser slowing down due to all the shiny and inappropriate animations? Here are some ways to remove all CSS Transforms Transitions and 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.

CSS transitions and transforms are a powerful way to enhance and delight user experiences. No added library like GSAP or Velocity.js is necessary. Neither is JavaScript required. CSS3 animations include properties that are already built into CSS and are widely supported across all browsers. Animations are a great way to provide visual feedback, delightful moments and memorable interactions. Remember, animations should enhance the user experience and not be distracting. Animations should be consistent with subtle and simple movements.

Disable CSS Transforms Transitions Animations

To disable CSS transitions permanently use the 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 the 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.

Pin

Temporary Approach

To disable animations, transitions, etc. just for some time, event or code execution period, first declare the 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.

READ MORE: How To Change Your MAC Address In Windows 10 PC

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.