Взаимодействие с css3 animation через jquery

Как сделать так, чтобы при определённом условии анимация у блока откатывалась на определённый процент.

if ($('div.one-slide').hasClass('slick-active')) {
  //Откат на 0% анимации
} else if ($('div.two-slide').hasClass('slick-active')) {
  //Откат на 25% анимации
} else if ($('div.three-slide').hasClass('slick-active')) {
  //Откат на 50% анимации
}  else if ($('div.three-slide').hasClass('slick-active')) {
  //Откат на 75% анимации
}

Возможно ли это сделать? Может быть можно сделать это как-то по другому?

html:

<div class="down-lines-block">
  <div class="some-line"></div>
</div>

css:

@keyframes line-width {
  0% {
    width: 0%;
  }
  25% {
    width: 25%;
  }
  50% {
    width: 50%;
  }
  75% {
    width: 75%;
  }
  100% {
    width: 100%;
  }
}
.some-line {
    height: 10px;
    background-image: linear-gradient(270deg, #FF1206 0%, #942320 100%);
    animation-name: line-width;
    animation-duration: 16s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}