JSFiddle - React, Tailwind, and code Playground

HTML

<div id=id1 class=t></div>
<div id=id2 class=t style=left:100px></div>

CSS

.t {
position:absolute;
border-top: 50px solid transparent;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid orange;
width: 0px;
height: 0px;
top:0px;
transition:500ms;
}

JavaScript

setInterval(function(){
setTimeout(function(){
id1.style.transform="skew(0deg,-20deg)";
id2.style.transform="skew(0deg,20deg)";
id1.style.top="20px";
id2.style.top="20px";
id1.style.borderBottomColor="salmon";
id2.style.borderBottomColor="salmon";
setTimeout(function(){
id1.style.transform="skew(0deg,0deg)";
id2.style.transform="skew(0deg,0deg)";
id1.style.top="0px";
id2.style.top="0px";
id1.style.borderBottomColor="orange";
id2.style.borderBottomColor="orange";
},500);
},500);
},1000);