CSS动画，悬停时淡入背景，停留，延迟后返回上一个答案

【问题标题】：CSS animation, fade in background on hover, stay, and go back to previous after a delayCSS动画，悬停时淡入背景，停留，延迟后返回上一个
【发布时间】：2017-06-16 23:15:15
【问题描述】：

假设我有一个带有透明红色的 HTML 元素。当我将元素悬停时，它应该变成纯红色。当我停止悬停元素时，它应该动画回到第一个状态，但仅在 X 秒之后。

到目前为止一切顺利，请参见代码 sn-p。

我的问题是当我停止悬停元素然后又回到悬停它时。初始动画再次开始，但它还没有动画到初始状态还没有开始，因此从全彩色到透明然后褪色到全彩色有一个难看的跳跃。

有没有办法不用 JavaScript 来解决这个问题？

然后，通过将 div 的背景设置为全色，保持不悬停时的颜色。但它也将其设置为初始颜色。我该如何解决这个问题？移除它只会在不悬停时移除颜色！

带有过渡的不透明度不是一个选项，因为我在这个 div 中有内容。

div {
  width: 100px;
  height: 100px;
  background: rgba(50, 60, 95, 1);
  animation-name: fadeItOut;
  animation-duration: 1s;
  animation-delay: 2s;
  animation-fill-mode: forwards;
}

div:hover {
  animation-name: fadeItIn;
  animation-duration: 1s;
  animation-delay: 0s;
  animation-fill-mode: forwards;
}

@keyframes fadeItIn {
  0% {
    background: rgba(50, 60, 95, 0.3);
  }
  100% {
    background: rgba(50, 60, 95, 1);
  }
}

@keyframes fadeItOut {
  0% {
    background: rgba(50, 60, 95, 1);
  }
  100% {
    background: rgba(50, 60, 95, 0.3);
  }
}

&lt;div&gt;&lt;/div&gt;

【问题讨论】：

对不起，我可能完全没有抓住重点，但为什么不直接this呢？

标签： css css-transitions css-animations

【解决方案1】：

我认为使用animation 可能会使事情变得复杂，而transition 会是更好的选择。动画有一个起点和终点（0% 和 100% 关键帧），因此当您悬停或悬停时，元素首先设置为 0% 关键帧处的状态（因为动画方向是正常的）和然后继续到100% 关键帧。当您快速悬停或悬停时（在上一个动画完成之前），由于0% 关键帧的道具设置，您总是会看到这些跳跃。

以下应该是您需要的：

div {
  width: 100px;
  height: 100px;
  background: rgba(50, 60, 95, 0.3);
  transition-property: background;
  transition-duration: 1s;
  transition-delay: 2s;
}
div:hover {
  background: rgba(50, 60, 95, 1);
  transition-delay: 0s;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

你说得很好！ :) 我之前确实尝试过一次，但是我在同一个元素上有多个转换，这些转换相互杀死，因为它们发送到不同的位置。这帮助我找到了它。谢谢！

【解决方案2】：

试试这个

div {
  width: 100px;
  height: 100px;
  background: rgba(50, 60, 95, 1);
  transition: background 300ms;
  animation-name: fadeItOut;
  animation-duration: 1s;
  animation-delay: 0s;
  animation-fill-mode: forwards;
}

div:hover {
  animation-name: fadeItIn;
  animation-duration: 1s;
  animation-delay: 0s;
  animation-fill-mode: forwards;
}

@keyframes fadeItIn {
  0% {
    background: rgba(50, 60, 95, 1);
  }
  100% {
    background: rgba(50, 60, 95, 0.3);
  }
}

@keyframes fadeItOut {
  0% {
    background: rgba(50, 60, 95, 0.3);
  }
  100% {
    background: rgba(50, 60, 95, 1);
  }
}

现场演示 - https://jsfiddle.net/rye2gnp3/

【讨论】：

但是 OP 需要在悬停状态更改之前存在延迟。
这个是正确的@grinmax，这正是我给出的建议:)

【解决方案3】：

您的代码可以正常工作。

您所说的这种“可怕”效果只是因为您在动画 fadeOut 完成之前悬停了元素。

试着像这样减少 div 的动画延迟：

div {
  width: 100px;
  height: 100px;
  background: rgba(50, 60, 95, 1);
  animation-name: fadeItOut;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}

这是我为你制作的小提琴：https://jsfiddle.net/oqyep7tt/

至少哈利的方式比这要好得多。

【讨论】：