当我创建 @keyframes 动画并将其分配给悬停时的图像时,它会随机闪烁。正如您在 GIF 中看到的那样,它只能随机地正常工作几次。
我已经尝试了以下所有方法并为每个供应商添加了前缀:
背面可见性:隐藏;
animation-fill-mode: forwards;
transform-style: preserve-3d;
为什么会发生这种情况,如何解决?
这可以在 this jsfiddle 中复制
最佳答案
问题是图像从您的鼠标移开,导致它失去动画效果。
插图(#
= 鼠标光标):
首先,您用鼠标对其进行动画处理:
--------
| # |
--------
下一次渲染,它失去了鼠标焦点,因此失去了它的动画:
-------
# | |
-------
下一次渲染,它回到原来的状态,因为它不再有 :hover
状态:
--------
| # |
--------
再一次,它会动画:
-------
# | |
-------
如果您改为将鼠标悬停在父元素上,它将始终关注该父元素。然后你可以使用 parent:hover > child { animate }
:
----------------------
| ----- |
| | # | |
| ----- |
----------------------
----------------------
| ----- |
| # | | |
| ----- |
----------------------
解决这个问题的一种方法是在父元素上设置悬停:
.imgwrapper > img {
height: 100px;
background-color: red;
backface-visibility: hidden;
animation-fill-mode: forwards;
transform-style: preserve-3d;
display:inline-block;
}
.imgwrapper:hover > img {
animation: move 1s;
}
@keyframes move {
0% {
transform: translateX(100px);
}
100% {
transform: translate(0);
}
}
<div class="imgwrapper">
<img src="http://place-hold.it/300x500?text=New Text&bold"/>
</div>
关于CSS @keyframes 动画在悬停时不断闪烁,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51606456/