css动画Spritesheet响应问题

Question

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

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

http://jsfiddle.net/qya15v3v/1/

.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

Plz试试这个：

Demo

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