I'm having this issue that my not-on-hover animation returns to its normal state only once, after that it's bugged as shown in the gif below, and does not work correctly. I was thinking that there was an alternative to the inverse of on hover instead of what I'm using right now but no luck finding anything. Any advice?
.expanding-button { width: 7rem; height: 7rem; background-color: blue; color: white; border-radius: 50%; cursor: pointer; transition: all 0.5s ease-in-out;}.button__img { width: 5rem; height: auto; transition: all 1s ease-in-out;}.expanding-button:hover .button__img { animation-delay: 1s; animation: spin 1s forwards, move-left 1s forwards; transform-origin: center left;}.expanding-button:hover { background-color: darkblue; width: 700px; height: 100px; border-radius: 50px;}.expanding-button:not(:hover) .button__img { animation: move-right 0.5s forwards;}@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}@keyframes move-left { 0% { transform: translateX(0); } 100% { transform: translateX(-18rem); }}@keyframes move-right { 0% { transform: translateX(-18rem); } 100% { transform: translateX(0); }}
