0

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

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

1 回答 1

0

如果您更改background-size较小的屏幕怎么办？

于 2013-09-24T16:11:22.800 回答