使用css3的动画图像

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

我的演示：

我想说的是：

你能帮我吗？

---

提前感谢

您需要调整背景位置值和步骤参数，在您的情况下，您的图像的宽度为1595px，有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;
}

---

您能澄清一下“幻灯片式动画gif”是什么意思吗？它看起来像是在某种程度上滑动/循环…所以我的意思是：我猜

背景位置

应该是图像的宽度，在

步骤中

图像的数量。

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