Instantly share code, notes, and snippets.

Embed
What would you like to do?
/* 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

This comment has been minimized.

Copy link

WarenGonzaga commented Aug 31, 2016

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

@refigaro

This comment has been minimized.

Copy link

refigaro commented Jan 4, 2017

Awesome, it worked for me! Thanks!

@DEMZL25

This comment has been minimized.

Copy link

DEMZL25 commented Jan 10, 2017

This dont work for me! Animations are still on are there any other solutions?

@Jeshreen

This comment has been minimized.

Copy link

Jeshreen commented Apr 1, 2017

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

@MrC8

This comment has been minimized.

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

This comment has been minimized.

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;
    }
  }
}```
@mihaila2

This comment has been minimized.

Copy link

mihaila2 commented May 10, 2018

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

This comment has been minimized.

Copy link

armikhael commented May 17, 2018

I love you

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