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

【问题标题】：CSS @keyframes animation keeps flickering on hoverCSS @keyframes 动画在悬停时不断闪烁
【发布时间】：2023-03-16 07:33:01
【问题描述】：

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

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

backface-visibility: hidden;

animation-fill-mode: forwards;

transform-style: preserve-3d;

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

这可以在this jsfiddle中复制

【问题讨论】：

移动它的那一刻，你的鼠标就不再在图像上。它会自动向后移动。由于滞后，您不会看到它一直在闪烁，但基本上您可以期望它在每个奇数渲染步骤中向右移动，在每个偶数渲染步骤向左移动。
这个闪烁问题持续了几个小时，transform-style: preserve-3d; 修复了它。非常感谢。

标签： css animation flicker

【解决方案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>

【讨论】：

【解决方案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>

希望这对您有所帮助。

【讨论】：

【解决方案3】：

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

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

【讨论】：