Анимация относительных спрайтов в CSS

Я пытаюсь найти лучший способ анимировать лист спрайта на веб-странице с помощью CSS; Я нашел пример на 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%; }
    }