Hover after CSS animation - html

Question

I am trying to have a hover work after a css animation.
The animation changes size and colour of a circle using keyframes, however after the animation is complete, the colour it finishes on will not change on hover as it normally would.
body {
background: black;
}
#panorama {
position: fixed;
margin: auto;
top: 0;
right: 0;
bottom: 4vw;
left: 0;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
#panorama.large {
width: 17vw;
height: 17vw;
}
#panorama.black {
background-color: black;
border: solid rgba(255, 255, 255, 0.4) 1px;
-webkit-filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.6));
-moz-filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.6));
filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.6));
}
#panorama.glow {
animation-duration: 1s;
animation-timing-function: ease-out;
animation-delay: 0.7s;
animation-fill-mode: forwards;
}
#panorama.large.black.glow {
animation-name: panoramaLargeBlackGlowDownTurnOn;
}
#keyframes panoramaLargeBlackGlowDownTurnOn {
0% {
width: 17vw;
height: 17vw;
background-color: black;
}
99% {
background-color: black;
}
100% {
width: 3.5vw;
height: 3.5vw;
background-color: white;
-webkit-filter: drop-shadow(0 0 6px rgba(255, 255, 255, 1));
-moz-filter: drop-shadow(0 0 6px rgba(255, 255, 255, 1));
filter: drop-shadow(0 0 6px rgba(255, 255, 255, 1));
}
}
#panorama.large.black.glow:hover {
background-color: red !important;
}
<a href="#">
<div id="panorama" class="large black glow"></div>
</a>
or see the code here: JSFiddle

Answer 1

This is because you are using forwards which will force the use of the last state of your animation and you cannot override it. To overcome this you can consider CSS variable to define the background coloration and you simply change the variable to change the background
body {
background: black;
}
#panorama {
position: fixed;
margin: auto;
top: 0;
right: 0;
bottom: 4vw;
left: 0;
border-radius: 50%;
}
#panorama.large {
width: 17vw;
height: 17vw;
}
#panorama.black {
background-color: black;
border: solid rgba(255, 255, 255, 0.4) 1px;
filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.6));
}
#panorama.glow {
animation-duration: 1s;
animation-timing-function: ease-out;
animation-delay: 0.7s;
animation-fill-mode: forwards;
}
#panorama.large.black.glow {
animation-name: panoramaLargeBlackGlowDownTurnOn;
}
#keyframes panoramaLargeBlackGlowDownTurnOn {
0% {
width: 17vw;
height: 17vw;
background-color: black;
}
99% {
background-color: black;
}
100% {
width: 3.5vw;
height: 3.5vw;
background-color: var(--c,#fff);
filter: drop-shadow(0 0 6px rgba(255, 255, 255, 1));
}
}
#panorama.large.black.glow:hover {
--c: red;
}
<a href="#">
<div id="panorama" class="large black glow"></div>
</a>
Another idea is to use an inset box-shadow for the coloration:
body {
background: black;
}
#panorama {
position: fixed;
margin: auto;
top: 0;
right: 0;
bottom: 4vw;
left: 0;
border-radius: 50%;
}
#panorama.large {
width: 17vw;
height: 17vw;
}
#panorama.black {
background-color: black;
border: solid rgba(255, 255, 255, 0.4) 1px;
filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.6));
}
#panorama.glow {
animation-duration: 1s;
animation-timing-function: ease-out;
animation-delay: 0.7s;
animation-fill-mode: forwards;
}
#panorama.large.black.glow {
animation-name: panoramaLargeBlackGlowDownTurnOn;
}
#keyframes panoramaLargeBlackGlowDownTurnOn {
99% {
background-color: black;
}
100% {
width: 3.5vw;
height: 3.5vw;
background-color: #fff;
filter: drop-shadow(0 0 6px rgba(255, 255, 255, 1));
}
}
#panorama.large.black.glow:hover {
box-shadow:0 0 0 50vw red inset;
border-color:rgba(255, 0, 0, 0.6); /*we also change the border since background is also visible under the border*/
}
<a href="#">
<div id="panorama" class="large black glow"></div>
</a>