JSFiddle - React, Tailwind, and code Playground

HTML

<div class="item"></div>

CSS

body{
    background: black;
}
.item{
    height: 100px;
    width: 100px;
    border-radius: 25px 0px;
    border: 1px solid white;
    box-shadow: 2px 2px 6px rgba(0,0,0,.5);
    -webkit-transition: -webkit-animation 1s linear ease-out;
    -webkit-animation: none;
    transition: all 0s ease-out; 
}

.item:hover{
    transition: all 1s ease-in; 
    -webkit-animation: party_nav_alt2 1s infinite linear;        
}

@-webkit-keyframes party_nav_alt2 {
    0% {box-shadow: 0 0 8px 3px red;}
    20% {box-shadow: 0 0 8px 3px yellow;}
    40% {box-shadow: 0 0 8px 3px cyan;}
    60% {box-shadow: 0 0 8px 3px #7700ff;}
    80% {box-shadow: 0 0 8px 3px white;}
    100% {box-shadow: 0 0 8px 3px red;}
}