如何在移动设备上禁用动画？

Question

我尝试过使用媒体查询

@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;
    }
} 

还尝试了一些带有javascript浏览器检测器的css，但它仍然没有禁用动画。

.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
}

不确定还有什么要尝试的。我正在使用Waypoints.css / Js和Animate.css，如果这有帮助的话。任何信息和反馈将非常感谢伙计们。谢谢！

这是我的GitHub回购https://github.com/Alex-Carver/NaiaFinal

网站：http://naia.ca/salmon/