JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>

CSS

div {
    width: 100px;
    height: 50px;
    border: 3px solid black;
    -webkit-animation: aniBoth 15s linear infinite;
}
@-webkit-keyframes aniBoth {
    0%, 16.666%, 33.333% { background: green; }
    8.333%, 24.999%, 41.666% { background: red; }
    50% { background: green; }
    50.001% { background:white; width: 100px; }
    75%, 100% { width: 100px; }
    62.5%, 87.5% { width: 150px; }
}