JSFiddle - React, Tailwind, and code Playground

by wangd933

HTML

<div> </div>

CSS

@-webkit-keyframes rainbow {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}

@keyframes rainbow {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}

div {
    width: 200px;
    height: 200px;
    border: 1px solid black;
}

div:hover{
    -webkit-animation: 1s rainbow backwards; 
    animation: 1s rainbow backwards;
}