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 reliably work (somehow works in this SO code snippet but not generally), presumably because the keyframe animation won't allow the temporary change to yellow, even when it's 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?

CodePudding user response：

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>

CodePudding user response：

Use box-shadow to create an extra layer

#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>