Skip to content

Instantly share code, notes, and snippets.

Last active August 21, 2023 10:37
Show Gist options
  • Save agragregra/25f26a76cbfb9b5bb430 to your computer and use it in GitHub Desktop.
Save agragregra/25f26a76cbfb9b5bb430 to your computer and use it in GitHub Desktop.
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
.animated {
/*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;
Copy link

MrC8 commented Jul 29, 2017

you can also wrap the global .animated class with this
@media only screen and (min-width : 575px ) {
.animated {

Copy link

jhogue commented Mar 16, 2018

This is great, saved me a bunch of time. My use case was turning off animations for @media print. I was using Waypoints to trigger them, and for print, everything was hidden because the animations were not triggered. This helped override those animations and turn everything to an initial un-animated state.

If anyone cares, this is what I did:

  // Kill all transitions and animations
  .animated {
    transition-property: none !important;
    transform: none !important;
    animation: none !important;
  // Make animated elements visible
  html.js {

    // Unhide any elements that were waiting to be animated
    // jQuery Waypoints usually will turn "initial" to "animated"
    .animated.animated__active {
      visibility: visible;
      animation-duration: 0ms;

Copy link


I tried this to stop animation in the odometer in mobile, but i have no results so far. Can this be used for odometers as well?

Copy link

I love you

Copy link

Abogoud commented Jan 21, 2019


Copy link

The content for which the animations are applied are not being displayed on smaller screens. any solutions for this pls?

Copy link

was helpful

Copy link

navotera commented Jul 9, 2023

Thank you bro, God Bless you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment