Create a gist now

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.

Show comment
Hide comment
@WarenGonzaga

WarenGonzaga Aug 31, 2016

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

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.

Show comment
Hide comment
@refigaro

refigaro Jan 4, 2017

Awesome, it worked for me! Thanks!

refigaro commented Jan 4, 2017

Awesome, it worked for me! Thanks!

@DEMZL25

This comment has been minimized.

Show comment
Hide comment
@DEMZL25

DEMZL25 Jan 10, 2017

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

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.

Show comment
Hide comment
@Jeshreen

Jeshreen Apr 1, 2017

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

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.

Show comment
Hide comment
@MrC8

MrC8 Jul 29, 2017

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

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.

Show comment
Hide comment
@jhogue

jhogue 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;
    }
  }
}```

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.

Show comment
Hide comment
@mihaila2

mihaila2 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?

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.

Show comment
Hide comment
@armikhael

armikhael May 17, 2018

I love you

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