JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div id="one" style="--to-color: red;"></div>
<div style="--to-color: blue;"></div>

CSS

div {
    width: 100px;
    height: 100px;
    margin: 10px;
    background: black;
    border-radius: 50%;
    display: inline-block;
    animation: change-color 1s linear forwards infinite alternate;
  }
  
  @keyframes change-color {
    
    to {
      background: var(--to-color);
    }
  }

JavaScript

setTimeout(function(){
	$("#one").attr("style", "--to-color: orange");
}, 3000)


setTimeout(function(){
	$("#one").attr("style", "--to-color: green");
}, 6000)