我正在尝试创建一些复活节动画，其中有一只小兔子接住了下落的鸡蛋。现在效果很好，但我遇到的麻烦是我似乎无法创建一个按钮来重新启动我的多个动画并让它们再次下落/向下移动。
我已经尝试了很多东西，这似乎是我能得到的最接近的东西，但这似乎只是播放/暂停整个事情，并且在我释放悬停后元素会消失。
#logo:hover ~ #ei, #otherelements{ -webkit-animation-play-state:running; }
/* most likely the problem /*
animation-iteration-count: 1;
但由于多个动画分别移动，我需要动画迭代计数 1
有谁知道这是否可以仅使用 CSS 或者我需要实现一些 javascript/jQuery 吗？
http://jsfiddle.net/p5r9F/ http://jsfiddle.net/p5r9F/
这很简单，年轻的乡绅（抱歉）
@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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
