Scrub CSS @keyframes

So you want to scrub a CSS @keyframes animation back and forth but there's no CSS property to set the current time.

Breath. Don't try to change the current time, change the animation. Imagine a timeline Daniel San. An animation floats on this timeline. The current time is paused and rests on the timeline. If you change the animation-delay property, the animation moves back and forth but the current time still does not move.

Here's some code:

<style>

  /* Just for demo, make a sponge and a long slider. */

  #input {
    width: 300px;
  }

  #sponge {
    width: 100px;
    height: 140px;
    border-radius: 8px;
    margin: 40px 0;
    background-color: #fff;
  }


  /* Wax on. Wax off. */

  @keyframes scrub {
    from {
      transform: translate3d(10px, 0, 0) rotate(-15deg);
    }
    to {
      transform: translate3d(300px, 0, 0) rotate(15deg);
    }
  }


  /* Set the animation to 1s, paused on the first frame,
  not loop, and linear. This will make sense later. */

  #sponge {
    animation-duration: 1s;
    animation-play-state: paused;
    animation-fill-mode: both;
    animation-timing-function: linear;
    animation-name: scrub;
  }

</style>


<div id="sponge"></div>
<input id="input" type="range" value="0" min="0" max="1" step="0.01"/>


<script>

  document.getElementById('input').addEventListener('input', e => {

    // We set the `min` and `max` attributes on the input, 
    // clamping this value between 0 and 1.

    // Remember we set the animation duration to 1s, 
    // so it matches our 0 - 1 progress nicely. 

    let currentTime = e.target.value;


    // Here's the trick, the animation is paused and on 
    // the first frame. Changing the `animation-delay` css
    // style to a negative value changes where on the animation
    // that first frame lands. 

    document.getElementById('sponge').style.animationDelay = `-${currentTime}s`;
    
  });

</script>

See it in action.