3

我遇到了一个小问题，试图让动画在动画中间停止，优雅地返回默认状态。我正在使用: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；对如何使其工作没有任何限制。

4

1 回答 1

2

css3 动画：悬停；强制整个动画

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

于 2011-10-09T18:12:25.090 回答