悬停时重新启动动画答案

【问题标题】：Restart animation on hover悬停时重新启动动画
【发布时间】：2023-03-09 10:42:01
【问题描述】：

我正在尝试制作一些复活节动画，其中有一只小兔子抓住了落下的鸡蛋。现在效果很好，但我遇到的问题是我似乎无法创建一个按钮来重新启动我的多个动画，让它们再次下降/向下移动。

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

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

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

但由于多个动画分别移动，我有点需要animation-iteration-count 1

有谁知道这是否可以仅使用 CSS 或者我需要实现一些 javascript/jQuery 吗？

http://jsfiddle.net/p5r9F/

【问题讨论】：

你必须使用javascript
您可以通过为animation-name 属性设置一些值来启动动画。但是，在发生快速而快速的事情（如点击）之后，很难保持animation-name。我们需要一个长状态（如:hover、:focus、:disabled、:enabled、:checked...）来附加animation-name足够长的时间以将动画运行到最后。这意味着你必须在#logo 上保持足够长的时间让动画运行到最后，之后你可以再次尝试悬停，它会再次运行。在这里演示：jsfiddle.net/viphalongpro/p5r9F/1
请注意，所有animation-names 应从所有元素的正常状态中删除。它们仅在 :hover 状态下添加。
哇，这就像一个魅力！谢谢老哥

标签： html css

【解决方案1】：

这是个轻松的小侍卫（对不起）

@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>

【讨论】：