css - 如何在特定断点处关闭 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%);
}
}

标签： cssanimation

Answer 1

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