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