Imagine you have an HTML element that is red with transparency. When you hover over the element, it should turn solid red. After hovering and then stopping, the element should animate back to its original state after a set time period (X seconds).
Everything seems to be working fine so far based on the code snippet provided.
The issue arises when you stop hovering over the element and then go back to hovering over it. The initial animation starts again before the animation to the initial state has completed, resulting in an abrupt transition from full color to transparent and then fading back to full color.
Is there a way to resolve this without using JavaScript?
If you set the background of the div to the full color, it maintains the color when not hovering but also sets it back to the initial color. How can this be addressed? Removing the background only removes the color when not hovering!
Using opacity with a transition is not feasible as there is content inside the div.
div {
width: 100px;
height: 100px;
background: rgba(50, 60, 95, 1);
animation-name: fadeItOut;
animation-duration: 1s;
animation-delay: 2s;
animation-fill-mode: forwards;
}
div:hover {
animation-name: fadeItIn;
animation-duration: 1s;
animation-delay: 0s;
animation-fill-mode: forwards;
}
@keyframes fadeItIn {
0% {
background: rgba(50, 60, 95, 0.3);
}
100% {
background: rgba(50, 60, 95, 1);
}
}
@keyframes fadeItOut {
0% {
background: rgba(50, 60, 95, 1);
}
100% {
background: rgba(50, 60, 95, 0.3);
}
}<div></div>