Question

我有一个 hitbox ，它基本上是一个脉动的矩形，表示你应该点击一些东西，当我:hover我希望将动画快进到它的结尾时。< / p>

我已经做了一个解决方法，实际上是添加一个伪元素，其元素的结束状态的初始不透明度为0，我只需转换为1 on：hover。

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

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

Answer 1

如何更改animation-duration并将animation-fill-mode设置为forwards :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;
    }
}

Answer 2

（目前）不可能。

daviestar summed it up quite well：

我之前尝试过这种效果。当前状态是这样的：仅交互式css动画仅限于转换，非交互式动画可以使用动画关键帧。而且它们混合不好。嵌套（伪）元素和效果，以及使用javascript触发父类是最好的方法。

CSS3 - 以＆amp;：hover结束的快进关键帧动画

2 个答案: