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

Question

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

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

背面可见性:隐藏；

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>