Skip to content

Instantly share code, notes, and snippets.

@agragregra
Last active August 21, 2023 10:37
Show Gist options
  • Star 41 You must be signed in to star a gist
  • Fork 37 You must be signed in to fork a gist
  • 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;
}
}
@warengonzaga
Copy link

warengonzaga commented Aug 31, 2016

Hey man! I was wrong it is just a conflict between my code! Great job men!

@refigaro
Copy link

refigaro commented Jan 4, 2017

Awesome, it worked for me! Thanks!

@Jeshreen
Copy link

Jeshreen commented Apr 1, 2017

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

@MrC8
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 {
}
}

@jhogue
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__initial,
    .animated.animated__active {
      visibility: visible;
      animation-duration: 0ms;
    }
  }
}```

@mirelasemanjaku
Copy link

Hello,

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?

@armikhael
Copy link

I love you

@Abogoud
Copy link

Abogoud commented Jan 21, 2019

thanks

@Franklin-raph
Copy link

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

@saeed-balkani
Copy link

was helpful

@navotera
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