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

Question

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

\n\n

@-webkit-keyframes circle {\n    from { transform:rotate(0deg); }\n    to { transform:rotate(180deg); }\n}\n\n@-webkit-keyframes inner-circle {\n    from { transform:rotate(0deg); }\n    to { transform:rotate(-180deg); }\n}\n\n#one {\n    position: absolute;\n    left: 500px;\n    top: 200px;\n    width:100px;\n    height:100px;\n    border-radius: 50px;\n    background-color: #000000;\n}\n\n#two {\n    width:100px;\n    height:100px;\n    margin: 0px auto 0;\n    color:orange;\n    font-size:100px;\n    line-height:1;\n\n    transform-origin:50% 200px;\n}\n\n\n #one:hover > div {\n     animation: circle 1s linear infinite;\n    -webkit-animation: circle 1s linear infinite;\n }\n#one:hover > div > div {\n     animation: inner-circle 1s linear infinite;\n    -webkit-animation: inner-circle 1s linear infinite;\n }\n</style>\n

\n\n

\n

\n\n

    <div id="one">\n        <div id="two"><div id="three">\xe2\x98\xbb</div></div>\n    </div>\n

\n\n

\n\n\n

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

\n

Answer 1

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

此外，您还需要添加forwards以防止动画每次都重置。添加forwards到动画简写时，您实际上是将属性animation-fill-mode从默认值更改none为forwards。

来自 MDN：

CSSanimation-fill-mode属性指定 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;
}