CSS3-快进关键帧动画结束于&：悬停

我有一个hitbox，它基本上是一个跳动的矩形，指示你应该单击某个东西，当我：悬停元素时，我想将动画快进到它的末尾

我已经做了一个变通方法，它本质上是添加一个伪元素，该元素的结束状态的开始不透明度为0，我只是在：hover上转换为1

我的CodePen解决方案：

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

如何更改动画持续时间并将动画填充模式设置为“向前打开：悬停”

在本例中，我将动画持续时间设置为0.1s，并通过设置动画填充模式：向前；它将保持最终状态

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

---

目前还不可能

:

---

我以前试过达到这个效果。当前状态为：仅交互式css动画仅限于过渡，而非交互式动画可以使用动画关键帧。而且它们不能很好地混合。嵌套伪元素和效果以及使用javascript触发父类是最好的方法

---

猜猜你在找什么？看不出来是怎么回事？如果您正在谈论将动画播放状态设置为“暂停”，则它不会帮助我，它只是将动画冻结在其当前位置。我想把它移到它的末端。我以前试过达到这个效果。当前状态为：仅交互式css动画仅限于过渡，而非交互式动画可以使用动画关键帧。而且它们不能很好地混合。嵌套伪元素和效果，以及使用javascript触发父类是最好的方法。动画持续时间会在某个地方丢失，请看这里，我考虑将动画持续时间计数更改为1，但它似乎也不起作用。你是说动画迭代计数吗？我不知道你想在悬停时快进什么。你想快进脉动效果吗？@Christoferviland，啊，是的，我当然是指动画迭代计数。对不起