Turn animation off using @Media Query

Question

I would like to stop all animation on all mobile devices. How would I achieve this task?

[this](http://stackoverflow.com/questions/11131875/what-is-the-cleanest-way-to-disable-css-transition-effects-temporarily) could be helpful. All you'd have to do is enable that process when the useragent is mobile. Either that or just set that `.notransition` class to a media query that specifies when the screen is smaller (denoting a mobile device) — Alexander Lozada, Apr 26 '14 at 22:20
@AlexanderLozada Thank you, I am checking into it. I am unfamiliar with JS, Hope it's not to painful. — MSiegle, Apr 26 '14 at 22:27
Somebody hopefully might be able to offer a more concrete solution below. — Alexander Lozada, Apr 26 '14 at 22:31

score 3 · Answer 1 · answered Apr 27 '14 at 11:01

3

The answer given by Alexander in the comments above works, and you can use media queries instead like so:

@media (max-width: 800px) {
  * {
   -webkit-transition: none !important;
   -moz-transition: none !important;
   -o-transition: none !important;
   -ms-transition: none !important;
   transition: none !important;
  }
}

Use what ever media queries you use for mobile devices and use the * wildcard to apply the no transition to all elements.

If you have animations as well as transitions you can try setting the animation-name:none; which should disable all animations.

answered Apr 27 '14 at 11:01

caffeinated.tech

6,428
1
21
40

From the code posted http://jsfiddle.net/EkZZf/ How would u write it? – MSiegle Apr 28 '14 at 15:34
From the example that LcLk provided, it'd be as simple as putting it in the CSS box. http://jsfiddle.net/piedoom/EkZZf/1/ – Alexander Lozada Apr 28 '14 at 21:53

Turn animation off using @Media Query

1 Answers1