<div class="track">
  <div class="thing" id="thing"></div>
</div>

<input id="delay-slider" type="range" min="-2" max="0" step="0.1" />
.track {
  border: 5px solid #ded;
  height: 100px;
  padding: 20px;
  width: 300px;
}
.thing {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background: lightgreen;
  animation: move 2s linear infinite alternate;
  animation-play-state: paused;
  animation-delay: -1s;
}


@keyframes move {
  to {
    transform: translateX(200px) scale(2);
    opacity: 0.5;
  }
}


body {
  padding: 20px;
}
View Compiled
var thing = $("#thing");
var slider = $("#delay-slider");

slider.on("change", function() {
  thing.css({
    "animation-delay": slider.val() + "s"
  })
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js