Currently, I am working on a planet orbit code where I want to enhance the animation speed upon hover. The goal is for the animation to complete one final cycle at the new speed and then come to a stop. I have been successful in increasing the speed on hover by applying a new animation to a parent class. However, I am struggling to figure out how to make it stop after a single cycle has finished and return to its initial position. The play-state property did not give the desired effect as it was too abrupt. Additionally, setting a new iteration-count directly also didn't work. I attempted using JavaScript but encountered some challenges. Any assistance would be greatly appreciated.
.wrapper{
position:absolute;
top:40%;
left:50%;
margin-left:-125px;
margin-top:-65px;
height:250px;
width: 250px;
animation:orbit 2s linear;
animation-iteration-count: infinite;
animation-play-state: paused;
}
#orbit {
height:250px;
width: 250px;
z-index:1;
border: 1px solid #989898;
border-radius: 225px;
animation:orbit 14s linear infinite;
transform-origin:center center;
}
#planet {
position:absolute;
top:5%;
left:5%;
height: 50px;
width: 50px;
z-index:2;
transform-origin:center center;
background-color: orange;
border-radius: 100%;
}
.wrapper:hover{
animation-play-state: running;
}
@keyframes orbit {
100% {
transform:rotate(360deg);
}
}<div class="wrapper">
<div id="orbit">
<div id="planet">
</div>
</div>
</div>