An object's colour is cycling between soft red and blue, using a keyframe animation.
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?
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>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>