JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<span class="shevron"></span>
<span class="shevron"></span>
<span class="shevron"></span>

CSS

.shevron{
  display:block;
  overflow:visible;
  font-family:"Times New Roman";
  padding:0 20px;
  
}
.shevron:before{
  content:"\2228";
  font-size:20px;
  color:#00f;
  transform:scaleX(1.8); 
  display:inline-block;
  line-height:10px;
  animation-duration:.9s;
  animation-iteration-count:infinite;
  
}
.shevron:nth-child(1):before{
  animation-name:btn-1;
}
.shevron:nth-child(2):before{
  animation-name:btn-2;
}
.shevron:nth-child(3):before{
  animation-name:btn-3;
}
@keyframes btn-1{
  0%, 33%{color:#f00;}
  33%,100%{color:#00f;}
}
@keyframes btn-2{
  0%, 33%{color:#00f;}
  33%, 66%{color:#f00;}
  66%, 100%{color:#00f;}
}
@keyframes btn-3{
  0%, 67%{color:#00f;}
  70%, 100%{color:#f00;}
}