JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

CSS

ul {
  list-style-type: none;
  padding: 1em;
  border: dashed 1px red;
}
li {
  display: inline-block;
  width: 5vw;
  height: 5vw;
  background: gray;
  border-radius: 50%;
}

ul:hover li {
  animation: .2s changeBgColor;
}

ul li:nth-child(1) {
  animation-delay: 0.1s;
}

ul li:nth-child(2) {
   animation-delay: 0.2s;
}
ul li:nth-child(3) {
  animation-delay: 0.3s;
}
ul li:nth-child(4) {
  animation-delay: 0.4s;
}
ul li:nth-child(5) {
  animation-delay: 0.5s;
}
ul li:nth-child(6) {
  animation-delay: .6s;
}

@keyframes changeBgColor {
  from {
    background: gray;
  }
  to {
    background: red;
  }
}