title: Control CSS keyframes animation progress with React
body: <p>Let’s say I have a simple keyframes animation to move a box from left to right:</p>
  <pre><code>@keyframes mymove {
    0% {
      left: 0px;
    }
    20% {
      left: 200px;
    }
    100% {
      left: 250px;
    }
  }
  </code></pre>
  <p>Is there a way to control this animation with a slider ranging from 0-100% in React? Meaning, the animation should always represent the state of the slider. If the slider is moved from 20% to 40% the animation should also be moved from 20% to 40% during that time.</p>
  <p>Yes, I know that’s not the intended purpose of keyframes animations but I’d like to find a way regardless.</p>
  <p>Here’s a CodeSandbox link: <a href="https://codesandbox.io/s/keyframe-experiment-96x5qy" rel="nofollow noreferrer">https://codesandbox.io/s/keyframe-experiment-96x5qy</a></p>