JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>

CSS

div {
    background:green;
    width:100px;
    height:100px;
    -webkit-animation: in 1s 200ms  forwards, out 1s 1200ms forwards;
}

@-webkit-keyframes in {
    from {
        background: green;
    }
    to {
        background: red;
    }
}
@-webkit-keyframes out {
    from {
        background: red;
    }
    to {
        background: blue;
    }
}