Html 悬停时重新启动动画

我想用一只小兔子抓一个掉下来的鸡蛋来制作一些复活节动画。现在它工作得很好，但我遇到的问题是，我似乎无法创建一个按钮来重新启动我的多个动画，让它们再次下降/向下移动

我已经尝试了很多东西，这一个似乎是我能得到的最接近的，但这似乎只是播放/暂停整个事情，元素将消失后，我释放悬停

#logo:hover ~ #ei, #otherelements{ -webkit-animation-play-state:running;  }

/* most likely the problem /*
animation-iteration-count: 1;

但是由于多个动画分别移动，我需要动画迭代计数1

有没有人知道这是否只需要CSS就可以实现，或者我需要实现一些javascript/jQuery

这很容易，年轻的乡绅（对不起）

@为yournameofanimation设置关键帧{
0%{顶部：0；左侧：0；背景：#dda221；}
50%{顶部：500px；左侧：100px；背景：#e0；}
100%{顶部：0；左侧：50px；背景：灰色；}
}
.班级名称{
动画：yournameofanimation；
动画持续时间：1s；/*当然可以更改*/
职位：相关；
}
.类名称：悬停{
动画：yournameofanimation；
动画持续时间：1s；/*当然可以更改*/
}
试试看

---

您必须使用JavaScription，您可以通过为

动画名称

属性设置一些值来启动动画。但是，在快速（如单击）发生之后，很难保留

动画名称。我们需要一个较长的状态（如
：悬停
，
：焦点
，
：禁用
，
：启用
，
：选中
），以将
动画名称附加到足够长的时间，以便将动画运行到底。这意味着您必须在
#徽标
上保持足够长的悬停时间，以便动画运行到最后，然后您可以再次尝试悬停，动画将再次运行。此处演示：请注意，所有
动画名称
都应从所有元素的正常状态中删除。它们只在
：hover
状态下添加。哇，这就像一个符咒！谢谢，伙计
@keyframes yournameofanimation {
0% {top: 0; left: 0; background: #dda221;}
50% {top: 500px; left: 100px; background: #e0e0e0;}
100% {top: 0; left: 50px; background: grey;}
}
.nameofclass {
animation: yournameofanimation;
animation-duration: 1s; /* of course can be varied */
position: relevant;
}
.nameofclass:hover {
animation: yournameofanimation;
animation-duration: 1s; /* of course can be varied */
}
</style>
<div class="nameofclass">
<p> Try it! </p>