循环淡入元素（依次循环）css

Question

我想用css顺序淡入淡出元素（一个接一个），即显示一个，隐藏它，显示下一个，隐藏它等等，然后重复。目前我有这个css它工作正常，但我将有20个元素，似乎很多代码的东西这么简单。关于如何用更少的代码改进这一点的任何建议？

  .map-presence__stat--stat1 {
      animation: fadeInOut1 6s ease-in-out;
      animation-iteration-count: infinite;
    }

.map-presence__stat--stat2 {
  animation: fadeInOut2 6s ease-in-out;
  animation-iteration-count: infinite;
}

.map-presence__stat--stat3 {
  animation: fadeInOut3 6s ease-in-out;
  animation-iteration-count: infinite;
}
@-webkit-keyframes fadeInOut1 {
  0%{
    opacity: 1;
  }
  32%{
    opacity: 1.0;
  }
  33%{
    opacity: 0;
  }
  99%{
    opacity: 0;
  }
}

@-webkit-keyframes fadeInOut2 {
  0%{
    opacity: 0;
  }
  32%{
    opacity: 0;
  }
  33%{
    opacity: 1;
  }
  66%{
    opacity: 1;
  }
  67%{
    opacity: 0;
  }
  99%{
    opacity: 0;
  }
}


@-webkit-keyframes fadeInOut3 {
  0%{
    opacity: 0;
  }
  32%{
    opacity: 0;
  }
  33%{
    opacity: 0;
  }
  66%{
    opacity: 0;
  }
  67%{
    opacity: 1;
  }
  99%{
    opacity: 1;
  }
}