An object's colour is cycling between soft red and blue, using a keyframe animation.
When I hover on it, I want the animation to pause, and the colour turn yellow.
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.
The following straightforward code doesn't work:
HTML:
<div id='box'></div>
CSS:
#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;
}
}
Codepen example here.
This doesn't work, 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?
