html - CSS での相対スプライト シート アニメーション

Question

CSS を使用して Web ページのスプライト シートをアニメーション化する最良の方法を見つけようとしています。http://jsfiddle.net/simurai/CGmCe/で例を見つけましたが、レンダリング フレームは 50x72 の絶対ピクセルです。小さい画面解像度でアニメーション化されたスプライトを小さいサイズに縮小できるように、相対的なサイズ変更が必要です。絶対ピクセル値を相対サイズに交換し、キーフレーム アニメーションの background-position プロパティを相対値に変更しようとしましたが、うまくいかないようです (アニメーションが不安定になり、あるフレームから別のフレームにゆっくりと移動するように見えます)。 、本来のように再生する代わりに)。ヘルプ/アドバイスをいただければ幸いです。

   .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%; }
    }