Safari에서 작동하는 Chrome에서 CSS 애니메이션이 작동하지 않습니다.

Question

제 문제는 마우스를 움직일 때 사용하는 간단한 트위터 스프라이트 시트가 있다는 것입니다. 하지만 Chrome에서 마우스를 올리면 왼쪽으로 스쿠버가 움직이지만 움직이지는 않습니다.

#tw:hover #twitter-bird { 
    margin-left:-100px; 
    -webkit-animation: fly 0.2s steps(3) 0 3; 
    -moz-animation: fly 0.2s steps(3) 0 3; 
    animation: fly 0.2s steps(3) 0 3; 
} 

@-webkit-keyframes fly { 
from { background-position: 0 0; } 
to { background-position: -450px 0; } 
} 

@-moz-keyframes fly { 
    from { background-position: 0 0; } 
    to { background-position: -450px 0; } 
} 

@keyframes fly { 
    from { background-position: 0 0; } 
    to { background-position: -450px 0; } 
} 

나는 이것에 대해 약간 다른 사람에게 글을 보았다 :

1. CSS Animation not working in Chrome
2. CSS Animation not working in Chrome
3. css3 animation not working in chrome
4. CSS Animation not working on Chrome

그리고 대부분의 크롬을위한 CSS에서 "애니메이션 :"을 앞에 붙이려면 "-webkit-"이 필요하다는 조언이있는 것 같습니다. 그러나 나는 그것을했다. 사파리와 파이어 폭스 에서뿐만 아니라이 새가 크롬으로 퍼지게하려면 무엇을 놓치고 싶습니까? Javascript 또는 jQuery를 사용해야합니다. 고맙습니다!

Answer 1

재산

animation: fly 0.2s steps(3) 0 3; 

아마 잘못된 것입니다. 당신은 지연이 없음을 말하고 싶은 경우에, 명확하게하고 장치

animation: fly 0.2s steps(3) 0s 3; 

을 설정하지만이 그것을