JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">Hover states don't work after animation</div>

CSS

@keyframes go {
    0% {
        background: green;
    }
    100% {
        background: pink;
    }
}
@-webkit-keyframes go {
    0% {
        background: green;
    }
    100% {
        background: pink;
    }
}


.box {
    animation: go 3s forwards;
    -webkit-animation: go 3s forwards;
}
.box:hover {
    -webkit-animation: none;
    background: orange;
    cursor: pointer;
}