gpt4 book ai didi

html - 悬停时重新启动动画

转载 作者:行者123 更新时间:2023-12-05 06:45:33 26 4
gpt4 key购买 nike

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

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

#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/

最佳答案

这很简单,年轻的乡绅(抱歉)

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

关于html - 悬停时重新启动动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23114753/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com