CSS3 - 快进关键帧动画结束于 & :hover

Question

我有一个 hitbox，它基本上是一个脉动的矩形，指示您应该单击某些东西，当我 :hover 我想要将动画快进到的元素时结束了。

我已经做了一个解决方法，它基本上是添加一个伪元素，该元素的结束状态的开始不透明度为 0，我只需在 :hover 上转换为 1。

我在 CodePen 上的解决方法:http://codepen.io/KATT/pen/ziBsq

如何在不使用伪元素的情况下获得类似的结果？

Answer 1

如何更改 animation-duration 并将 animation-fill-mode 设置为 forwards on :hover?

在这种情况下，我将 animation-duration 设置为 0.1s 并通过设置 animation-fill-mode: forwards;它将保持最终状态。

.hitbox {
    position: relative;
    width: 100px;
    height: 50px; 
    cursor: pointer;
    border: 3px solid yellow;
    border-radius: 5px;
    animation: pulse 2s ease-in-out infinite alternate;

    &:hover {
        animation: pulse 0.1s ease-in-out forwards;
    }
}