javascript - 悬停时暂时偏离 CSS 动画，然后恢复

Question

使用关键帧动画，对象的颜色在柔和的红色和蓝色之间循环。

1. 当我将鼠标悬停在其上时，我希望动画暂停，并且颜色变为黄色。
2. 当我离开时，它应该平滑地过渡回我悬停时的颜色，并且关键帧颜色动画应该从暂停的位置恢复。

最小的简单代码 (Codepen demo) :

#box {
  width: 100px;
  height: 100px;
  background-color: #ffcccc;
  animation: cycleColor 2s infinite linear;
  transition: background-color .2s;
}

#box:hover {
  animation-play-state: paused;
  background-color: yellow;
}

@keyframes cycleColor {
  0% {
    background-color: #ffcccc;
  }
  50% {
    background-color: #ccccff;
  }
}

<div id='box'></div>

这通常不起作用，可能是因为关键帧动画不允许临时更改，即使在暂停时也是如此。

相反，我可以完全删除悬停时的动画，但随后它无法从暂停的位置顺利恢复。

我也尝试过在悬停时添加和删除类，但这并没有解决这个问题。

有 CSS 或 JS 解决方案吗？

Answer 1

使用box-shadow创建额外的图层

#box {
  width: 100px;
  height: 100px;
  background-color: #ffcccc;
  animation: cycleColor 2s infinite linear;
  transition: box-shadow .2s;
}

#box:hover {
  animation-play-state: paused;
  box-shadow: 0 0 0 100vmax inset yellow;
}

@keyframes cycleColor {
  0% {
    background-color: #ffcccc;
  }
  50% {
    background-color: #ccccff;
  }
}

<div id='box'></div>