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

Question

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

到目前为止一切顺利，请参阅代码片段。

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

有没有不用 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);
  }
}

<div></div>

Answer 1

我认为当 transition 是更好的选择时，使用 animation 可能会让事情变得复杂。动画有开始点和结束点(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;
}

<div></div>