<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"
})
});
This Pen doesn't use any external CSS resources.