css动画精灵表响应问题

我有一个动画精灵表，当它的尺寸设置为像素时，效果非常好

但当尺寸设置为百分比或vh时，它会停止工作。 有人面临这个问题吗

---

您可以使用以下方法解决此问题

@keyframes flag {
    from {background-position: 0 top;}
    to {background-position: 800% top;} /*this is the number of steps multiplied by 100%*/
}

您会注意到我已更改了百分比平方，使其保持为正方形（使用填充而不是高度）

请尝试以下方法：

---

我认为你应该将不同图片的动画放大或缩小到不同大小的屏幕上，这会有什么反应？因为你的精灵本身正在适应容器高度，并且你正在操纵水平

背景位置
以显示精灵的不同部分，我要说的是，您必须将用于位置的值从像素更改为一些“响应”值。（虽然，对于第二个示例，宽度是动态的[25%]，但高度是静态的[200px]，这也可能不起作用。我认为在这种情况下，您必须“完全动态”，以便宽度和高度之间的比率保持不变。）@MoLow它将对
@媒体
作出响应，例如，您将测试一个宽度为480px的智能手机，因此对于此分辨率，您应该绘制一幅宽度为460px的图像，并从左右两侧添加约10px的边距。
@keyframes flag {
    from {background-position: 0 top;}
    to {background-position: 800% top;} /*this is the number of steps multiplied by 100%*/
}

@keyframes flag {
    from {background-position: 0 top;}
    to {background-position: 800% top;}
}