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. 你需要改變「錘子」到真正的動畫的名字「myfirst」

   動畫：myfirst 0.4秒輕鬆

2. 過渡到#hammer增加輕輕看動畫

   #hammer { 
       transition: all 0.5s ease 
   }