悬停并播放动画一次，而不是循环播放

Posted 2023-03-06

【中文标题】悬停并播放动画一次，而不是循环播放

【英文标题】：hover and play animation once instead of looping

【发布时间】：2015-04-16 05:16:04

【问题描述】：

如果你查看我的代码并运行它。

@-webkit-keyframes circle 
    from  transform:rotate(0deg); 
    to  transform:rotate(180deg); 


@-webkit-keyframes inner-circle 
    from  transform:rotate(0deg); 
    to  transform:rotate(-180deg); 


#one 
    position: absolute;
    left: 500px;
    top: 200px;
    width:100px;
    height:100px;
    border-radius: 50px;
    background-color: #000000;


#two 
    width:100px;
    height:100px;
    margin: 0px auto 0;
    color:orange;
    font-size:100px;
    line-height:1;

    transform-origin:50% 200px;



 #one:hover > div 
     animation: circle 1s linear infinite;
    -webkit-animation: circle 1s linear infinite;
 
#one:hover > div > div 
     animation: inner-circle 1s linear infinite;
    -webkit-animation: inner-circle 1s linear infinite;
 
</style>

    <div id="one">
        <div id="two"><div id="three">☻</div></div>
    </div>

您会注意到笑脸不断循环旋转 180 度的动画。我不想要这个。每次我将鼠标悬停在黑色圆圈上时，我只希望它执行一次动画。我该怎么做？

【问题讨论】：

是的，它现在只运行一次，但完成后它会回到原来的位置。我怎样才能让它留在那里？

【参考方案1】：

如果您不希望动画无限发生，请从动画速记中删除 infinite。

此外，您还需要添加forwards 才能添加到prevent the animation from resetting each time。将forwards 添加到动画速记时，实际上是将属性animation-fill-mode 从默认值none 更改为forwards。

From MDN:

animation-fill-mode CSS 属性指定 CSS 动画在执行前后应如何将样式应用于其目标。

#one:hover > div 
    animation: circle 1s linear forwards;
    -webkit-animation: circle 1s linear forwards;

#one:hover > div > div 
    animation: inner-circle 1s linear forwards;
    -webkit-animation: inner-circle 1s linear forwards;

【参考方案2】：

将所有无限值更改为您希望动画循环的次数。在您的情况下，它将是一次，因此您想将无限更改为 1。