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

Question

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

@-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度的动画。我不想要这个效果，我只希望每次将鼠标悬停在黑色圆圈上时执行一次动画。我该怎么做？

- user3127854

---

是的，现在它只会走一次，但当它完成后，它会回到原始位置。我该如何让它停留在那里？ - user3127854

Answer 1

如果你不想让动画无限循环播放，可以从动画速记中删除 infinite。

此外，为了防止动画每次重置, 你还需要添加 forwards。将 forwards 添加到动画速记中，实际上是将 animation-fill-mode 属性从默认值 none 更改为 forwards。 来自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;
}

- Josh Crozier

Answer 2

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

- boombap123