Question

我有一个关于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;
}

你能帮帮我吗？提前致谢

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

<强> Demo here

使用css3的动画图像

1 个答案: