html - 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 度