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

Question

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

我已经尝试了以下所有方法，并为每个方法添加了前缀供应商：

backface-visibility: hidden;

animation-fill-mode: forwards;

transform-style: preserve-3d;

为什么会发生这种情况，如何解决？

这可以在this jsfiddle

中复制

Answer 1

问题是图像从鼠标移开，导致其失去动画。

插图（# =鼠标光标）：

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

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

下一次渲染时，它将失去鼠标焦点，从而失去其动画效果：

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

下一次渲染时，由于不再具有: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>

Answer 2

如@Randy在注释 中所述，第二秒钟移动鼠标时，鼠标不再位于图像上。会导致错误。您可以通过用<div>包装图像并在: hover

上使用<div>来解决此问题

以下是为您提供的示例代码：

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

对图像使用过渡速度，以便获得平滑的效果。 使用以下代码。

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