JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test"></div>

CSS

#test{
    width: 200px;
    height: 200px;
    background-color: rgba(215,54,92,0.7);
}
@keyframes test_hover {
  from {
    background: -webkit-linear-gradient(45deg, rgba(215,54,92,0.9), rgba(215,54,92,0.5)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(45deg, rgba(215,54,92,0.9), rgba(215,54,92,0.5)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(45deg, rgba(215,54,92,0.9), rgba(215,54,92,0.5)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(45deg, rgba(215,54,92,0.9), rgba(215,54,92,0.5)); /* Standard syntax (must be last) */
  }
  to {
    background: -webkit-linear-gradient(45deg, rgba(215,54,92,0.5), rgba(215,54,92,0.9)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(45deg, rgba(215,54,92,0.5), rgba(215,54,92,0.9)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(45deg, rgba(215,54,92,0.5), rgba(215,54,92,0.9)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(45deg, rgba(215,54,92,0.5), rgba(215,54,92,0.9)); /* Standard syntax (must be last) */
  }
}
#test:hover{
  cursor: pointer;
  animation-name: test_hover;
  animation-duration: 4s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
}