Reversing CSS animation after leaving hover does not work - html

Question

I'm trying to reverse the animation after the user is not hovering. I tried making a keyframe with the opposite animation, using reverse and adding transition: all 2s but neither worked. I also tried div::after:not(:hover).
html {
background-color: black;
}
div {
position: relative;
width: 50vw;
transition: all 2s reverse;
}
div:hover::after {
position: absolute;
content: " ";
height: 50px;
width: 50px;
top: 50%;
right: 0;
border: solid rgb(255, 255, 255);
border-width: 0 10px 10px 0;
display: inline-block;
animation: fadeMain 2s cubic-bezier(0.785, 0.135, 0.15, 0.86) forwards;
// background-color: green;
}
div::after:not(:hover) {
animation: fadeMain 2s cubic-bezier(0.785, 0.135, 0.15, 0.86) reverse;
}
#keyframes fadeMain {
from {
opacity: 0;
transform: translateX(0px) rotate(-45deg);
}
to {
opacity: 1;
transform: translateX(20px) rotate(-45deg);
}
}
// Doesnt work:
// #keyframes fadeMainOut {
// from {
// opacity: 1;
// transform: translateX(20px) rotate(-45deg);
// }
// to {
// opacity: 0;
// transform: translateX(0px) rotate(-45deg);
// }
// }
<div>
<svg id="centerLogo" width="586" height="192" viewBox="0 0 586 192" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 192H36.5324L97.2281 82.4505L79.1057 49.2973L0 192ZM124.555 32.8649L106.145 3.43666e-05L88.023 32.8649L106.145 65.7298L176.046 192H212.291L124.555 32.8649Z" fill="white"/>
<path d="M332.66 92.8289L335.248 89.6577L400.547 0.576604H366.315L318.277 66.3063L315.688 69.7658L313.099 66.3063L264.773 0.576604H230.541L296.127 89.6577L298.428 92.8289V93.1171L315.688 116.18L371.493 192H405.724L332.66 92.8289ZM225.651 192H259.882L307.058 128L290.086 104.649L225.651 192Z" fill="white"/>
<path d="M551.769 3.43666e-05L498.552 72.6487V72.937L445.623 3.43666e-05H411.392L479.567 93.4054L481.58 96V96.2883L485.032 100.901V192H512.36V100.613L513.223 99.7478L515.812 96.2883V96L517.825 93.4054L586 3.43666e-05H551.769Z" fill="white"/>
</svg>
</div>

Answer 1

Your problem is that div::after:not(:hover) doesn't render an :after element in div.
Also to switch animation between hover and non hover you need to use keywords other than from to.
these changes should fix it
div::after {
content: " ";
position: absolute;
height: 50px;
width: 50px;
top: 50%;
right: 0;
border: solid rgb(255, 255, 255);
border-width: 0 10px 10px 0;
display: inline-block;
opacity: 0;
animation: fadeMainOut 2s cubic-bezier(0.785, 0.135, 0.15, 0.86)
forwards;
}
div:hover::after {
content: " ";
position: absolute;
height: 50px;
width: 50px;
top: 50%;
right: 0;
border: solid rgb(255, 255, 255);
border-width: 0 10px 10px 0;
display: inline-block;
animation: fadeMain 2s cubic-bezier(0.785, 0.135, 0.15, 0.86) forwards;
}
#keyframes fadeMain {
from {
opacity: 0;
transform: translateX(0px) rotate(-45deg);
}
to {
opacity: 1;
transform: translateX(20px) rotate(-45deg);
}
}
#keyframes fadeMainOut {
0% {
opacity: 1;
transform: translateX(20px) rotate(-45deg);
}
100% {
opacity: 0;
transform: translateX(0px) rotate(-45deg);
}
}