如何在悬停时顺利完成活动的CSS动画？

Question

So I've got this planet orbit code and what I'm trying to do on hover is to speed up the animation, have it complete one final animation cycle (at this new speed), and then stop. I figured how to get it to speed up on hover (apply a new animation on a parent class) but I cannot figure out how to get it to stop after one cycle has completed and return to its starting point. play-state doesn't work, because it's too abrupt, and I can't seem to just set a new iteration-count. I've tried using JavaScript but I'm having some trouble figuring it out so I'd love some help.

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

Answer 1

If you just overwrite the animation-iteration-count in your :hover class, you'll get one orbit at the new speed. Then, you'll need to set up an event handler for when the mouse leaves the wrapper that stops everything.

 document.querySelector(".wrapper").addEventListener("mouseout", function(){ // Change the wrapper to only animate one more time this.style.animationIterationCount = "1"; // Remove the anmiation on the orbit document.getElementById("orbit").style.animation = "none"; }); 

 .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; animation-iteration-count: 1; /* Just overwrite the iteration count */ } @keyframes orbit { 100% { transform:rotate(360deg); } } 

 <div class="wrapper"> <div id="orbit"> <div id="planet"> </div> </div> </div>