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

Question

所以我得到了这个行星轨道代码以及我尝试在悬停时做的是加速动画，让它完成一个最后的动画周期（以这个新的速度），然后停下来我想到了如何让它加速悬停（在父类上应用新动画）但我无法弄清楚如何在一个周期完成后停止并返回其起点。 play-state不起作用，因为它太突然了，我似乎无法设置一个新的迭代计数。我尝试过使用JavaScript，但是我很难搞清楚，所以我很乐意帮忙。

MAX(SNO)

.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);
    }
}

Answer 1

如果您只是覆盖animation-iteration-count课程中的:hover，那么您将以新的速度获得一个轨道。然后，您需要设置一个事件处理程序，以便鼠标离开wrapper时停止一切。

＆＃13;

＆＃13;

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";
});

＆＃13;

.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);
    }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;