Turn OFF Animate.css on Mobile Devices

/* 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;
	}
}

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.