css - css3 によるアニメーション画像

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

手伝って頂けますか？前もって感謝します