CSS @keyframes 动画在悬停时不断闪烁

Question

当我创建@keyframes 动画并将其分配给悬停时的图像时，它会随机闪烁。正如您在 GIF 中看到的，它只能在随机的几次中正常工作。

我已经尝试了以下所有供应商和前缀供应商：

backface-visibility: hidden;

animation-fill-mode: forwards;

transform-style: preserve-3d;

为什么会出现这种情况，如何解决？

这可以在 this jsfiddle

中复制

Answer 1

使用图像的过渡速度，这样您可以获得平滑的效果。使用以下代码。

img{
    -webkit-transition: .3s ease-out;
    transition: .3s ease-out;
}

Answer 2

正如@Randy 在评论中解释的那样 你移动它的那一刻，你的鼠标就不再在图像上了。 这会导致错误。你可以简单地通过用 <div> 包装图像并在 <div>

上使用 : hover 来解决这个问题

下面是一个示例代码：

div {
  display: inline-block;
}

img {
  height: 100px;
  background-color: red;
  backface-visibility: hidden;
  animation-fill-mode: forwards;
  transform-style: preserve-3d;
}

div:hover img {
  animation: move 1s;
}

@keyframes move {
  0% {
    transform: translateX(100px);
  }
  100% {
    transform: translate(0);
  }
}

<div>
  <img src="http://www.stickpng.com/assets/images/584181fda6515b1e0ad75a33.png" />
</div>
<p>
  Sometimes a strange flicker occurs on hover.
</p>

希望对您有所帮助。

Answer 3

问题是图像从您的鼠标移开，导致它失去动画效果。

插图（# = 鼠标光标）：

首先，您用鼠标对其进行动画处理：

--------
|   #  |
--------

下一次渲染，它失去了鼠标焦点，因此失去了动画：

         -------
    #    |     |
         -------

下一次渲染，它回到原来的状态，因为它不再有 :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 动画在悬停时不断闪烁

CSS @keyframes animation keeps flickering on hover

css

animation

flicker