如何使css动画仅用于某些屏幕分辨率？

Question

我正在为在WordPress上运行的网站创建一个动画徽标，我想知道是否有可能使css动画只用于桌面分辨率。我认为动画不会工作在移动版本，我想有不同的css移动版本。

是否可以将@关键帧放入@media屏幕和(最小宽度:1000 it ){.}？以某种方式把它结合起来？

谢谢。

Answer 1

只需在媒体查询中使用animation属性即可。

@keyframes myKeyframe {
    from { top: 0; }
    to { top: 100px; }
}

@media screen and (min-width: 1000px) {
    #myDiv {
        animation: myKeyframe 1s;
    }
}