CSS Is it Possible to Pause a CSS Animation at a Specific Key Frame?

[Johna]

Is it possible to pause a CSS animation at a specific key frame?

I have this HTML:

<div id="sliderMain">
  <div id="sliderLL" class="st2"></div>
  <div id="sliderL" class="st1"></div>
  <a href="#" style="cursor: default;"><div id="sliderM" class="st0"></div></a>
  <div id="sliderR" class="st4"></div>
  <div id="sliderRR" class="st3"></div>
</div>

and this CSS:

@keyframes s2 {
    14.5% {background-position: 2000px;}
    16.6% {background-position: 1000px;}
    31.2% {background-position: 1000px;}
    33.2% {background-position: 0px;}
    47.8% {background-position: 0px;}
    49.9% {background-position: -1000px;}
    64.5% {background-position: -1000px;}
    66.6% {background-position: -2000px;}
    81.2% {background-position: -2000px;}
    83.2% {background-position: -3000px;}
    97.8% {background-position: -3000px;}
    99.999999998% {background-position: -4000px;}
    99.999999999% {background-position: 2000px;}
}

@keyframes s1 {
    14.5% {background-position: 1000px;}
    16.6% {background-position: 0px;}
    31.2% {background-position: 0px;}
    33.2% {background-position: -1000px;}
    47.8% {background-position: -1000px;}
    49.9% {background-position: -2000px;}
    64.5% {background-position: -2000px;}
    66.6% {background-position: -3000px;}
    81.2% {background-position: -3000px;}
    83.2% {background-position: -4000px;}
    97.8% {background-position: -4000px;}
    99.999999998% {background-position: -5000px;}
    99.999999999% {background-position: 1000px;}
}

@keyframes s0 {
    0% {background-position: 0px;}
    14.5% {background-position: 0px;}
    16.6% {background-position: -1000px;}
    31.2% {background-position: -1000px;}
    33.2% {background-position: -2000px;}
    47.8% {background-position: -2000px;}
    49.9% {background-position: -3000px;}
    64.5% {background-position: -3000px;}
    66.6% {background-position: -4000px;}
    81.2% {background-position: -4000px;}
    83.2% {background-position: -5000px;}
    97.8% {background-position: -5000px;}
    99.999999999% {background-position: -6000px;}
    100% {background-position: 0px;}
}

@keyframes s4 {
    14.5% {background-position: 4000px;}
    16.6% {background-position: 3000px;}
    31.2% {background-position: 3000px;}
    33.2% {background-position: 2000px;}
    47.8% {background-position: 2000px;}
    49.9% {background-position: 1000px;}
    64.5% {background-position: 1000px;}
    66.6% {background-position: 0px;}
    81.2% {background-position: 0px;}
    83.2% {background-position: -1000px;}
    97.8% {background-position: -1000px;}
    99.999999998% {background-position: -2000px;}
    99.999999999% {background-position: 4000px;}
}

@keyframes s3 {
    14.5% {background-position: 3000px;}
    16.6% {background-position: 2000px;}
    31.2% {background-position: 2000px;}
    33.2% {background-position: 1000px;}
    47.8% {background-position: 1000px;}
    49.9% {background-position: 0px;}
    64.5% {background-position: 0px;}
    66.6% {background-position: -1000px;}
    81.2% {background-position: -1000px;}
    83.2% {background-position: -2000px;}
    97.8% {background-position: -2000px;}
    99.999999998% {background-position: -3000px;}
    99.999999999% {background-position: 3000px;}
}

.st2 {
  animation: s2 35s infinite;
}

.st1 {
  animation: s1 35s infinite;
}

.st0 {
  animation: s0 35s infinite;
}

.st4 {
  animation: s4 35s infinite;
}

.st3 {
  animation: s3 35s infinite;
}

#sliderMain {
  margin: 0px;
  padding: 0px;
  width: 5000px;
  background-color: #262626;
  overflow: hidden;
  margin-left: calc(50vw - 2500px);
}

#sliderLL,
#sliderL,
#sliderM,
#sliderR,
#sliderRR {
  width: 1000px;
  height: 468px;
  float: left;
  background-image: url(../images/bgimage.png);
  background-repeat: repeat;
  transition: 0.5s;
  opacity: 0.7;
}

#sliderLL:hover,
#sliderL:hover,
#sliderR:hover,
#sliderRR:hover {
  transition: 0.5s;
  opacity: 0.85;
  animation-play-state: paused;     /*Here I want the animation to pause at these keyframes (16.6%, 33.2%, 49.9%, 66.6%, 83.2 and 99.999999998%) always pausing at the keyframe before, Is this possible?*/
}


#sliderLL {
  background-position: 2000px;
}

#sliderL {
  background-position: 1000px;
}

#sliderM {
  background-position: 0;
  opacity: 1 !important;
}
#sliderR {
  background-position: 4000px;
}

#sliderRR {
  background-position: 3000px;
}

If this isn't possible with pure CSS, can I do it with JS?

 

[OldMan]

Does this article help https://css-tricks.com/how-to-play-and-pause-css-animations-with-css-custom-properties/

 

[Johna]

Thanks, but it doesn't seem to be what I'm looking for.