如何使 css 动画仅在某些屏幕分辨率下有效？

Question

我正在 WordPress 上为网站 运行 创建一个动画徽标，我想知道是否可以使 css 动画仅适用于桌面分辨率。我认为动画不适用于移动版本，我想为移动版本设置不同的 css。

是否可以将@keyframes 放入@media 屏幕和(min-width: 1000px){...}？只是以某种方式组合它？

谢谢。

Answer 1

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

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

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