How to make list items scrollup animation look continuous/infinite

I have 3 list items that I am rotating upwards after every 3 seconds. I am doing it using transformY property.

Problem is, when it reaches last item, it cycles back giving effect of starting all over again.

How can I make this effect look continuous/infinite by keep rotating upwards even after last item?

JS

  setInterval(function(){
    var currActiveItem = $('.list span').css('transform');

    if(currActiveItem == "matrix(1, 0, 0, 1, 0, 0)") {
      $('.list span').css('transform', 'translateY(-67px)');
    }else if(currActiveItem == "matrix(1, 0, 0, 1, 0, -67)"){
      $('.list span').css('transform', 'translateY(-134px)');
    }else {
      $('.list span').css('transform', 'translateY(0)');
    }
  }, 3000);

CSS

  .transformed-z-0 {
    transform: translateZ(0);
  }

  .list {
    position: fixed;
    overflow: hidden;
    left: 0;
    width: 100%;
    height: 67px;
  }

  .list-item {
    display: block;
    height: 67px;
    transition: all 0.7s ease-in-out;
    transform: translateY(0);
  }

HTML

<h1 class="transformed-z-0">
  <span class="list">
    <span class="list-item">1</span>
    <span class="list-item">2</span>
    <span class="list-item">3</span>
  </span>
  <br>
  Some more text
</h1>