html - CSS 中的相对 Spritesheet 动画

Question

我正在尝试找到使用 CSS 为网页中的 Sprite 表制作动画的最佳方法；我在 http://jsfiddle.net/simurai/CGmCe/ 找到了一个例子，但渲染帧的绝对像素为 50x72。我需要大小是相对的，这样我就可以在较小的屏幕分辨率下将动画 Sprite 缩小到较小的尺寸；我曾尝试将绝对像素值换成相对大小，并将关键帧动画中的背景位置属性更改为相对值，但这似乎不起作用(动画变得不稳定，似乎从一帧缓慢移动到另一帧，而不是按应有的方式播放)。任何帮助/建议将不胜感激。

   .myAnimationProperties {
        width: 25%;
        height: 25%;
        background-image: url("Images/mySpriteSheet.png");

        -webkit-animation: play .8s steps(6) infinite;
        -moz-animation: play .8s steps(6) infinite;
        -ms-animation: play .8s steps(6) infinite;
        -o-animation: play .8s steps(6) infinite;
        animation: play .8s steps(6) infinite;
    }

    @-webkit-keyframes play {
       from { background-position:    0%; }
         to { background-position: -100%; }
    }

    @-moz-keyframes play {
       from { background-position:    0%; }
         to { background-position: -100%; }
    }

    @-ms-keyframes play {
       from { background-position:    0%; }
         to { background-position: -100%; }
    }

    @-o-keyframes play {
       from { background-position:    0%; }
         to { background-position: -100%; }
    }

    @keyframes play {
       from { background-position:    0%; }
         to { background-position: -100%; }
    }

Answer 1

如果为较小的屏幕更改 background-size 会怎么样？