How to make spinning image animation pause after each iteration?

I have an image and added a rotate animation to it, I want it to spin every 4 seconds but I don't know how to do that with JS or CSS.

      <div class="row">
  <div id="spin-animation" class="column">
      <div class="container">
        <img src="mockups/to-do-list-img..jpg" class="image" alt="to-do-list-api">
        <a href="https://github.com"  target="_blank">
        <div class="overlay">
          <div class="text">Simple jQuery To Do List App</div>
        </div>
          </a>
      </div>
  </div>

/*Animations*/
#spin-animation {
    animation-name: spin-animation;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    
}

@keyframes spin-animation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

You could change your @keyframes to a percentage. By placing the transform: rotate(0deg) at both 0% and 25%, you'll get an initial pause, then add your transform: rotate(0deg) at 75% and 100% this will be the same amount of initial pause you got at the beginning of the animation. Also change the animation duration to 1500ms 1.5 seconds so the 50% the rotation actually happens will be long enough to have a good effect.

You can play around with these percentages and your animation duration to get the desired effect you want.

@keyframes spin-animation {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(0deg);
    }
    75% {
        transform: rotate(360deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

.row {
  overflow: none;
}

#spin-animation {
    animation-name: spin-animation;
    animation-duration: 1500ms;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    
}

@keyframes spin-animation {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(0deg);
    }
    75% {
        transform: rotate(360deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

<div class="row">
  <div id="spin-animation" class="column">
      <div class="container">
        <img src="mockups/to-do-list-img..jpg" class="image" alt="to-do-list-api">
        <a href="https://github.com"  target="_blank">
        <div class="overlay">
          <div class="text">Simple jQuery To Do List App</div>
        </div>
          </a>
      </div>
  </div>