Question

我正在尝试使用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%; }
    }

Answer 1

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

CSS中的相对Spritesheet动画

1 个答案: