-2

我有一个关于 css 步骤动画的问题，所以我有 12 张图片，我想像动画 gif 一样滑动这些图片。但我无法做到这一点。

我的演示：http ://cssdeck.com/labs/full/9hwv565g

我想要什么：http ://cssdeck.com/labs/css-image-sprite-animations-with-steps-function

body {
    text-align: center;
}

@-webkit-keyframes wink {
    from { background-position: 0px; }
    to { background-position: -500px; }
}

@-moz-keyframes wink {
    from { background-position: 0px; }
    to { background-position: -500px; }
}

@keyframes wink {
    from { background-position: 0px; }
    to { background-position: -500px; }
}

.hi {
    width: 120px;
    height: 120px;
    background-image: url("http://i44.tinypic.com/nq7mrp.png");
    margin: 0 auto;

    -webkit-animation: wink .8s steps(10, end) infinite;
    -moz-animation: wink .8s steps(10, end) infinite;
    animation: wink .8s steps(10, end) infinite;
}​

你能帮助我吗？提前致谢

4

1 回答 1

1

您需要调整背景位置值和步骤参数，在您的情况下，您的图像宽度为 1595 像素并且有 12 帧：

body {
    text-align: center;
}

@-webkit-keyframes wink {
    from { background-position: 0px; }
    to { background-position: -1595px; }
}

@-moz-keyframes wink {
    from { background-position: 0px; }
    to { background-position: -1595px; }
}

@keyframes wink {
    from { background-position: 0px; }
    to { background-position: -1595px; }
}

.hi {
    width: 133px;
    height: 126px;
    background-image: url("http://i44.tinypic.com/nq7mrp.png");
    margin: 0 auto;

    -webkit-animation: wink .8s steps(12, end) infinite;
    -moz-animation: wink .8s steps(12, end) infinite;
    animation: wink .8s steps(12, end) infinite;
}

演示在这里

于 2013-09-07T09:23:21.523 回答