CSS 애니메이션이 작동하지 않습니까?

Question

개체를 먼저 회전시키고 떨어 뜨리고 싶습니다.
여기 내 코드가 있습니다. 실수가 무엇인지 잘 모릅니다.

CSS

body { 
} 
#hammer 
{ 
    -webkit-animation: hammer 5s linear 2s infinite; 
    -moz-animation: hammer 5s linear 2s infinite; 
    animation: hammer 5s linear 2s infinite; 
} 
@-webkit-keyframes myfirst 
{ 
    0% {-webkit-transform: rotateY(360deg);} 
    100% {-webkit-transform: rotateY(360deg);} 
} 
@keyframes myfirst 
{ 
    0% {transform: rotateY(360deg);} 
    100% {transform: rotateY(360deg);} 
} 
@-moz-keyframes myfirst 
{ 
    0% {-moz-transform: rotateY(360deg);} 
    100% {-moz-transform: rotateY(360deg);} 
} 

HTML

<center><img id="hammer" src="hammer.png" alt="hammer" width="100" height="100" /></center> 

Answer 1

당신이 360에서 360 무에서 회전되기 때문에이 일어나고있다. 0에서 360

Answer 2

당신이 실제 애니메이션의 이름 "죠아"

애니메이션 "망치"를 변경해야

1. 에 돌려보십시오 : 죠아 0.4s 쉽게

2. 가 #hammer에 전환을 추가 부드럽게 애니메이션보기

   #hammer { 
       transition: all 0.5s ease 
   }