流畅地停止 CSS3 动画中途停止的动画？ [复制]

Question

我遇到了一个小问题，我试图让动画在动画中间停止并优雅地返回默认状态。我正在使用父元素上的:hover 伪类将动画应用到子元素，但希望动画在我停止悬停在元素上时优雅地返回到默认状态。我觉得我不应该在这里使用:hover 伪类，还有另一种接近它的方法，但我似乎无法弄清楚如何让它过渡。它只是立即恢复到基本状态，这当然是有道理的，因为动画正在被剥离——但这不是想要的效果。这是当前的 HTML：

<div id="el1">
    <div class="child"></div>
</div>

和当前的 CSS

#el1 {
    margin-top: 100px;
    position: relative;
    background: transparent url(./image.png) no-repeat;
    height: 100px;
    width: 100px;
}

#el1 .child {
    height: 100%;
    width: 100%;
    background-color: white;
    opacity: 0;
}

#el1:hover .child {
    -webkit-animation-name: semiopacity;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes semiopacity {
    from { opacity: 0; }
    to { opacity: 0.4; }
}

回顾一下：悬停时图像上会出现闪烁的白色效果。我希望它在我停止悬停时动画回到原始关键帧，而不是突然恢复到“关闭”。我可以更改 HTML 或 CSS；对如何使其工作没有任何限制。

Answer 1

css3 animation on :hover; force entire animation

几天前问过类似的问题。此人还希望在移除悬停后显示他们的整个动画。看看吧。