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

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

流畅地阻止CSS3动画停止动画中期？

1 个答案: