流畅地停止 CSS3 动画在动画中停止？

发布于 2024-12-09 00:14:00 字数 1096 浏览 0 评论 0原文

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

原文

I'm running into a small problem attempting to have an animation stopped mid-animation gracefully returning to the default state. I'm applying an animation to a child element using the :hover pseudoclass on a parent element, but would like the animation to gracefully return to the default state when I stop hovering on the element. I'm getting the feeling that I shouldn't be using the :hover pseudoclass here and there's another method of approaching it, but I can't seem to figure out how to get it to transition off. It just instantly reverts to the base state, which of course makes sense because the animation is being stripped - but that's not the desired effect. This is the current HTML:

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

and the current 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; }
}

To recap: There's a flashing white effect over the image when hovering. I want it to animate back to the original keyframe when I stop hovering instead of snapping back to "off". I can change either the HTML or CSS; no restrictions on how to make it work.

分享到QQ

分享到微博