如何在特定的断点处关闭CSS动画？

Question

我想停止在CSS内置到移动设备时的某种效果。我知道jQuery

if ( $(window).width() > 766) {}

但是我还没有偶然发现CSS解决方案。这是我的动画。

@-webkit-keyframes slides{
0%{
    -webkit-transform: scale(1.5,1.5);
}
100%{
    -webkit-transform: scale(1,1) translateY(-40%); 
}
}

@-webkit-keyframes Fade{
from{
    opacity: 0;
}
to{
    opacity: 1;
}
}

@-webkit-keyframes up{
from{
    -webkit-transform: translateY(0);
}
to{
    -webkit-transform: translateY(-40%);
}
}

Answer 1

@media only screen and (max-width: 800px) {
* {
-webkit-animation: none !important;
-moz-animation: none !important;
-ms-animation: none !important;
animation: none !important;
}
}