-
-
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; | |
} | |
} |
you can also wrap the global .animated class with this
@media only screen and (min-width : 575px ) {
.animated {
}
}
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;
}
}
}```
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?
I love you
thanks
The content for which the animations are applied are not being displayed on smaller screens. any solutions for this pls?
was helpful
Thank you bro, God Bless you.
The content for which the animations are applied are not being displayed. any solutions for this?