Is there a way to loop a stepped animation?

I've created a stepped animation for a logo design, but I can't seem to get it to loop. I've tried recalling the function in the final step, using setInterval, but I'm pretty new to JQuery so I'm not 100% sure on the syntax. Does anyone have any suggestions?

Here is my existing code:

function move(step1, step2, step3, step4, step5) {
        $('.pupil').animate({
            left: '+=' + step1,
        }, 800, function() {
            $(this).animate({
                top: '+=' + step2,
           }, 800, function() {
                $(this).animate({
                    left: '+=' + step3,
                }, 800, function(){
                 $(this).animate({
                      top: '+=' + step4,
                   }, 800, function() {
                    $(this).animate({
                     left: '+=' + step5,
                      }, 800,);
                 
                })
            });
        });   
    });
    }
    $(function() {
       move(2, 2, -4, -2, 2);
    });

And a link to the codepen to see the html and css: https://codepen.io/kaitruss/pen/mdzxeZV

When I tried to loop the animation, most of the time it would just stop working. I attempted to add a sixth step where the function was called in order to restart it, but it just stopped working altogether. Using setInterval and calling the function didn't break it, but it also didn't loop.

Solution

I have cleaned a little the javascript code and now it is working, here is the code pen:

https://codepen.io/Crist-bal-D-az-lvarez/pen/BaqVqrr

Only edited the javascript

function move($element, movements, time) {
  if (movements.length > 0) {
    $element.animate(movements[0], time, function() {
      movements.shift();
      move($element, movements, time);
    });
  }
}

function animateEye() {
    move($('.pupil'), [
       { left: '+=2' },
       { top: '+=2' },
       { left: '+=-4' }, 
       { top: '+=-2' }, 
       { left: '+=2' }
    ], 800);
}

var interval = setInterval(animateEye, 800 * 5 + 2000); // wait 2 seconds after the five animation cycles

animateEye();

// clearInterval(interval); // stop the infinite loop animation

Here is snippet version

function move($element, movements, time) {
  if (movements.length > 0) {
    $element.animate(movements[0], time, function() {
      movements.shift();
      move($element, movements, time);
    });
  }
}

function animateEye() {
    move($('.pupil'), [
       { left: '+=2' },
       { top: '+=2' },
       { left: '+=-4' }, 
       { top: '+=-2' }, 
       { left: '+=2' }
    ], 800);
}

var interval = setInterval(animateEye, 800 * 5 + 2000); // wait 2 seconds after the five animation cycles

animateEye();

// clearInterval(interval); // stop the infinite loop animation

.text{
  color:#222345;
  font-size:100px;
  font-family: 'Cedarville Cursive', cursive;
}
.logo{
  position:relative;
  height: 150px;
  width:100px;
  overflow:hidden; 
}
.K{
 position:absolute;
 z-index:5;
 top: 0px;
 left: 0px;
}
.R{
 position:absolute;
 top: 25px;
 left: 24px;
}
.iris{
  position:absolute;
  width:22px;
  height:20px;
  background-color:#0DAB76;
  border-radius:30px;
  top:76px;
  left:4px;
}
.pupil{
  position:absolute;
  width:4px;
  height:12px;
  background-color:#272727;
  border-radius:15px;
  top:81px;
  left:13.5px;
}
.lid{
  position:absolute;
  width:15px;
  height:1px;
  top:75px;
  left:5px;
  border-radius:15px;
  z-index:6;
  transform:rotate(-7deg);  
}

<head><link href="https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
  <div class="logo">
   <div class="text K"> K </div>
   <div class="text R"> R </div>
   <div class="lid"></div>
   <div class="iris"></div>
   <div class="pupil"></div>
  </div>
</body>