<div class="wrap">
<svg version="1.1" id="group" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 488.87 140" style="enable-background:new 0 0 488.87 140;" xml:space="preserve">
<path class="item01" d="M24.93,134.64V28.08H5.73V7.14h66.58v20.93H53.27v106.56H24.93z"/>
<path class="item02" d="M77.35,134.64L101.43,7.14h32.11l23.77,127.49h-25.97l-4.25-26.92h-18.73l-4.41,26.92H77.35z M110.87,90.88h13.54
  l-6.77-49.74L110.87,90.88z"/>
<path class="item03" d="M170.37,134.64V7.14h28.17v127.49H170.37z"/>
<path class="item04" d="M227.82,134.64L212.39,7.14h23.92l7.55,74.29l9.6-74.13h18.73l10.07,73.66l7.71-73.82h23.61l-15.27,127.49h-24.55
  l-10.86-76.97l-10.23,76.97H227.82z"/>
<path class="item05" d="M321.15,134.64L345.23,7.14h32.11l23.77,127.49h-25.97l-4.25-26.92h-18.73l-4.41,26.92H321.15z M354.68,90.88h13.54
  l-6.77-49.74L354.68,90.88z"/>
<path class="item06" d="M414.01,134.64V7.14h19.83l26.13,61.38V7.14h23.29v127.49h-19.04L438.1,68.53v66.11H414.01z"/>
</svg>
</div>

body{
  width: 100%;
  height: 100vh;
  margin: 0;
  background: #fff;
}

@keyframes taiwan {
   0% {
     opacity: 0;
     transform: translateY(100%);
     stroke: #28CBAB;
     fill: #28CBAB;
  }
   10% {
     opacity: 1;
     transform: translateY(0);
     stroke: #28CBAB;
     fill: #28CBAB;
  }
   25% {
     opacity: 1;
     transform: translateY(0);
     stroke: #28CBAB;
     fill: #28CBAB;
  }
   50% {
     opacity: 1;
     transform: translateY(0);
     stroke: #2ef0c9;
     fill: #2ef0c9;
  }
   75% {
     opacity: 1;
     transform: translateY(0);
     stroke: #28CBAB;
     fill: #28CBAB;
  }
   92% {
     opacity: 0;
     transform: translateY(0);
     stroke: #28CBAB;
     fill: #28CBAB;
  }
   100% {
     opacity: 0;
     transform: translateY(100%);
     stroke: #28CBAB;
     fill: #28CBAB;
  }
}

.wrap{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  height: 100%;
  margin: 0 auto;
}

#group{
  display: block;
  width: 100%;
}

.item01,.item02,.item03,.item04,.item05,.item06{
  fill:  #28CBAB;
  stroke: #28CBAB;
  stroke-dasharray: 3194;
  stroke-dashoffset: 0;
  transition: all .3s;
  transform: translateY(100%);
  stroke-width: 1;
  opacity: 0;
}

.item01{
  animation: taiwan 5s ease 0.2s infinite forwards;
}

.item02{
  animation: taiwan 5s ease 0.4s infinite forwards;
}

.item03{
  animation: taiwan 5s ease 0.6s infinite forwards;
}

.item04{
  animation: taiwan 5s ease 0.8s infinite forwards;
}

.item05{
  animation: taiwan 5s ease 1s infinite forwards;
}

.item06{
  animation: taiwan 5s ease 1.2s infinite forwards;
}