title: How to disable animations on mobile devices?
body: <p>I have tried using media queries</p>
  
  <pre><code>@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;
      }
  } 
  </code></pre>
  
  <p>Also tried some css with javascript browser detector, but it still doesn't disable the animations.</p>
  
  <pre><code>.noanimated {
  -webkit-animation-duration: none;
  animation-duration: none;
  -webkit-animation-fill-mode: none;
  animation-fill-mode: none;
  }
  
  Javascript
  
  if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
  {
      $('body').addClass('noanimated'); // to remove transition
  }
  </code></pre>
  
  <p>Not really sure what else to try.  I'm using Waypoints.css/Js as well with Animate.css if that helps.  Any info and feedback would be greatly appreciated guys. Thanks!</p>
  
  <p>Here's my GitHub Repo <a href="https://github.com/Alex-Carver/NaiaFinal" rel="nofollow noreferrer">https://github.com/Alex-Carver/NaiaFinal</a></p>
  
  <p>Website: <a href="http://naia.ca/salmon/" rel="nofollow noreferrer">http://naia.ca/salmon/</a></p>