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

도와 드릴까요? 사전

Answer 1

에서 덕분에 당신은 당신이 폭 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; 
} 

Demo here