JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li id="one"></li>
    <li id="two"></li>
</ul>

CSS

@-webkit-keyframes target{
    from{background:red}
    to{background:green}
}
li{
    display:block;
    width:275px;
    height:50px;
    margin:3px;
    background:green;
    -moz-border-radius:5px;
    border-radius:5px
}
#one:before,#one:after,#two{
    -webkit-animation:target 3s linear;
}