Html 如何在媒体查询中定义关键帧？

在800px以上的显示器上，一切都运行良好，但在800px或低于800px的显示器上，一切都无法按预期运行

我的HTML和CSS如下所示：

.my\u测试{
宽度：50px；
高度：50px；
背景：红色；
显示：内联块；
-webkit动画：aaa 0.5s无限；
-o-动画：aaa 0.5s无限；
动画：aaa 0.5s无限；
位置：相对位置；
}
@-webkit关键帧aaa{
从{左：0px；}
到{左：50px；}
}
@-o-关键帧aaa{
从{左：0px；}
到{左：50px；}
}
@-moz关键帧aaa{
从{左：0px；}
到{左：50px；}
}
@关键帧aaa{
从{左：0px；}
到{左：50px；}
}
@媒体屏幕（最大宽度：800px）{
@-webkit关键帧aaa{
从{top:0px；}
到{top:50px；}
}
@-o-关键帧aaa{
从{top:0px；}
到{top:50px；}
}
@-moz关键帧aaa{
从{top:0px；}
到{top:50px；}
}
@关键帧aaa{
从{top:0px；}
到{top:50px；}
}
}

文件

您只是在媒体查询中缺少了

和

：

@media screen and (max-width: 800px)

它在这里工作。您可以在预览窗格中看到，当您运行代码段时，它会按照在媒体查询中定义的关键帧中的指示上下设置动画。要查看其在宽度超过800px时的工作情况，请单击“全屏”

.my\u测试{
宽度：50px；
高度：50px；
背景：红色；
显示：内联块；
-webkit动画：aaa 0.5s无限；
-o-动画：aaa 0.5s无限；
动画：aaa 0.5s无限；
位置：相对位置；
}
@-webkit关键帧aaa{
从{左：0px；}
到{左：50px；}
}
@-o-关键帧aaa{
从{左：0px；}
到{左：50px；}
}
@-moz关键帧aaa{
从{左：0px；}
到{左：50px；}
}
@关键帧aaa{
从{左：0px；}
到{左：50px；}
}
@媒体屏幕和屏幕（最大宽度：800px）{
@-webkit关键帧aaa{
从{top:0px；}
到{top:50px；}
}
@-o-关键帧aaa{
从{top:0px；}
到{top:50px；}
}
@-moz关键帧aaa{
从{top:0px；}
到{top:50px；}
}
@关键帧aaa{
从{top:0px；}
到{top:50px；}
}
}

---

你到底在期待什么？很高兴我能帮上忙。确保您接受解决问题的答案！：）