Is there a way to prevent css keyframe percentages from fading into one another?

Question

I am trying to create a super simple animation of a balloon using 4 different PNGs. I am using CSS to animate it by changing the background image at each keyframe. I don't want each keyframe to fade into the next but I can't use steps() since there is more than two images I'm trying to incorporate and to my understanding this only works with from and to. I have tried using jquery and looking into sprites to animate this instead but thought this would be simpler (for the sake of this being a very small aspect of my project), only it doesn't look quite right.

#balloon {
  animation: balloon-float linear 2s infinite;
}

@keyframes balloon-float {
  0% {
    background-image: url(../img/balloon-1.png);
  }
  25% {
    background-image: url(../img/balloon-2.png);
  }
  50% {
    background-image: url(../img/balloon-3.png);
  }
  75% {
    background-image: url(../img/balloon-4.png);
  }
  100% {
    background-image: url(../img/balloon-1.png);
  }
}

Answer 1

This is what I usually do in the CSS code embedded within my SVGs when I want something to "snap" instead of "glide" between values.

#balloon {
  animation: balloon-float linear 2s infinite;
}

@keyframes balloon-float {
  0%, 24.99%, 100%{
    background-image: url(../img/balloon-1.png);
  }
  25%, 49.99%{
    background-image: url(../img/balloon-2.png);
  }
  50%, 74.99%{
    background-image: url(../img/balloon-3.png);
  }
  75%, 99.99%{
    background-image: url(../img/balloon-4.png);
  }
}