Temporarily deviate from a CSS animation on hover, then resume

Issue

An object's colour is cycling between soft red and blue, using a keyframe animation.

1. When I hover on it, I want the animation to pause, and the colour turn yellow.
2. When I move away, it should smoothly transition back to the colour it was when I hovered, and the keyframe colour animation should resume from where it paused.

Minimal straightforward code (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>

This doesn't generally work, presumably because a keyframe animation won't allow a temporary change, even when paused.

Instead, I can totally remove the animation on hover, but then it can't smoothly resume from where it paused.

I have also tried adding and removing classes upon hover, but that hasn't solved this problem.

Is there a CSS or JS solution?

Solution

A bit of a hacky approach:

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

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

#box::after {
  position: absolute;
  width: 100%;
  height: 100%;
  content: '';
  display: block;
  background: yellow;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#box:hover::after {
  opacity: 1;
}

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

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

Answered By - Leland