悬停时重新启动动画 [英] Restart animation on hover

问题描述

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

I'm trying to create some Easter animation with a little bunny that catches a falling egg. Now that's working great, but where i'm having troubles is that i can't seem to create a button that restarts my multiple animations and let's them fall/move down again once more.

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

I've tried alot of things this one seemed was the closest i could get but this only seemed to play/pause the whole thing and the elements would disappear after i released the hover.

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

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

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

But since the multiple animations move separately i kind of need the animation-iteration-count 1

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

Does anyone know if this is possible with just CSS or do i need to implement some javascript/jQuery?

http://jsfiddle.net/p5r9F/

推荐答案

这太容易了 小乡绅 (Sorry)

This is easy young squire (Sorry)

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

这篇关于悬停时重新启动动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！