css 动画 Spritesheet 响应问题

Question

我有一个动画 sprite-sheet 当它的尺寸用像素设置时它工作得很好，

但是当设置尺寸时，无论是百分比还是 vh，它都会停止工作。有人遇到过这个问题吗？

.responsive, .static{
    border:1px solid red;
    display: inline-block;
    width:220px;
    height:220px;
    background-size: auto 100%;
}
.responsive{
    width:25vh;
    height:25vh;
}

Answer 1

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

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

Updated fiddle

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

Answer 2

请试试这个：

Demo

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

css 动画 Spritesheet 响应问题

css animation Spritesheet responsive issue

css

sprite-sheet