JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tree-right">TEST</div>

CSS

.tree-right {
-webkit-animation: treeright 2.0s steps(2);
-moz-animation: treeright 2.0s steps(2);
-ms-animation: treeright 2.0s steps(2);
-o-animation: treeright 2.0s steps(2);
animation: treeright 2.0s steps(2);
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
}


@-webkit-keyframes treeright {
from { background-color:  red; }
to { background-color: green; }

}

@-moz-keyframes treeright {
from { background-color:  red; }
to { background-color: green; }
}

@-ms-keyframes treeright {
from { background-color:  red; }
to { background-color: green; }
}

@-o-keyframes treeright {
from { background-color:  red; }
to { background-color: green; }
}

@keyframes treeright {
from { background-color:  red; }
to { background-color: green; }
}