Skip to content

Instantly share code, notes, and snippets.

@agragregra
Last active July 28, 2024 21:16
Show Gist options
  • Select an option

  • Save agragregra/25f26a76cbfb9b5bb430 to your computer and use it in GitHub Desktop.

Select an option

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

warengonzaga commented Aug 31, 2016

Copy link
Copy Markdown

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

@refigaro

refigaro commented Jan 4, 2017

Copy link
Copy Markdown

Awesome, it worked for me! Thanks!

@Jeshreen

Jeshreen commented Apr 1, 2017

Copy link
Copy Markdown

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

@MrC8

MrC8 commented Jul 29, 2017

Copy link
Copy Markdown

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

@jhogue

jhogue commented Mar 16, 2018

Copy link
Copy Markdown

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
Copy Markdown

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
Copy Markdown

I love you

@Abogoud

Abogoud commented Jan 21, 2019

Copy link
Copy Markdown

thanks

@Franklin-raph

Copy link
Copy Markdown

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

@saeed-balkani

Copy link
Copy Markdown

was helpful

@navotera

navotera commented Jul 9, 2023

Copy link
Copy Markdown

Thank you bro, God Bless you.

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