Анимация 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 
   }