Html CSS动画不工作？

我想先旋转对象，使其落下。
这是我的密码。不确定是什么错误

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>

---

因为您正在从360旋转到360，所以什么都没有发生。尝试从0旋转到360

您需要将“hammer”更改为真实动画的名称“myfirst”

动画：我的第一个0.4s轻松

添加一个过渡到

#hammer

以柔和地查看动画

#hammer {
    transition: all 0.5s ease
}