<div class="node" id="node" data-node></div>
<a href="#node" class="toggle" data-toggle>Play | Pause</a>
<input type="range" class="progress" id="progress" name="progress" min="0" max="100" value="0" data-progress>
*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, 
body {
  width: 100%;
  height: 100%;
}

body {
  display: flex;
  font-family: sans-serif;
  background-color: #fffeca;
}

.node {
  margin: auto;
  width: 20vmin;
  height: 20vmin;
  
  background-color: #00f;
}

.progress {
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: calc(100% - 40px);
}

.toggle {
  position: absolute;
  top: 20px;
  left: 50%;
  padding: 6px 10px 5px 10px;
  
  text-align: center;
  text-decoration: none;
  border: 1px solid #00f;
  border-radius: 3px;

  transform: translateX(-50%);
}
View Compiled 
const progress = document.querySelector('[data-progress]')
const toggle = document.querySelector('[data-toggle]')
const node = document.querySelector('[data-node]')

const duration = 4000

const keyframes = [
  { transform: 'translateX(0%)' },
  { transform: 'translateX(-200%)' },
  { transform: 'scaleX(.2) scaleY(4)' },
  { transform: 'rotate(180deg) scaleX(.2) scaleY(4)' },
  { transform: 'rotate(360deg) scale(1) translateX(200%)', borderRadius: '0%' },
  { transform: 'rotate(0deg) translateX(0%)', borderRadius: '50%', backgroundColor: '#ffe400' },
]

const options = {
  duration,
  fill: 'both'
}

const animation = node.animate(keyframes, options)
animation.pause()
animation.currentTime = 0

function handleProgress(event) {
  animation.pause()
  
  const { value } = event.target
  const progress = duration * .01 * value
  animation.currentTime = progress

  if(progress === duration) {
    animation.finish()
    animation.pause()
  }
}

function handleToggle(event) {
  event.preventDefault()
  
  if(animation.playState === 'running') {
    animation.pause()
  } else {
    animation.play()
  }
  
  progress.value = 100 * animation.currentTime / duration
}

animation.addEventListener('finish', () => {
  alert('finished')
})

progress.addEventListener('input', handleProgress)
toggle.addEventListener('click', handleToggle)
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.