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?

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.

Saksham Bhargava
Saksham Bhargavahttps://sakshambhargava.com/
Saksham is a tech enthusiast who loves talking about new gadgets and innovations. He loves travelling, particularly to places not frequented by tourists. In his free time, you will find Saksham beating the phone at PUBG Mobile or streaming new highly-rated TV series.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

List of Tatsumaki Bot Commands [UPDATED 2020]

Here is the full list of Tatsumaki Commands, which is an extremely capable Discord bot. It is used for moderation, increasing user...

How To Install And Use Magisk on Android

Any person who has a rooted device must be familiar with SuperSU. It has been around for ages and has become the...

How To Speed Up Your Laptop Speed In 5 Simple Steps

Since you are reading this article, I guess you are also frustrated with laptop speed.  After a few months I brought my...

LinkedIn Introduces Stories, Video Chats, Other New Features

LinkedIn has introduced new features such as Stories, video calling integration, an improved search experience, and the ability to edit messages as...