JSFiddle - React, Tailwind, and code Playground

HTML

<div></div

CSS

div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    -webkit-animation: play 5s step-end;
    animation: play 5s step-end;
}

@-webkit-keyframes play {
    0%   {background:red;}
    25%  {background:green;}
    45%  {background:blue;}
    55%  {background:orange;}
    75%  {background:black;}
    100% {background:white;}
}

@-keyframes play {
    0%   {background:red;}
    25%  {background:green;}
    45%  {background:blue;}
    55%  {background:orange;}
    75%  {background:black;}
    100% {background:white;}
}