<div class="container">
  <div class="buttons">
    <button id="play">Play</button>
    <button id="pause">Pause</button>
    <button id="reverse">Reverse</button>
    <button id="fast">Fast-forward</button>
  </div>
  <div class="ball"></div>
</div>

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

body {
  background-color: #f4f4f4;
  font-family: 'Open Sans', sans-serif;
}

.container {
  display: flex;
  padding: 20px;
  justify-content: center;
} 

.buttons {
  margin-right: 50px;
  display: flex;
  flex-flow: column nowrap;
}

button {
  background-color: #2488fd;
  border-radius: 2px;
  color: #fff;
  margin-bottom: 5px;
  text-align: center;
  width: 110px;
  cursor: pointer;
  font-size: 14px;
  border: none;
  padding: 5px 7px;
  transition: background-color .15s ease-out;
  
  &:hover {
    background-color: #323232;
  }
  
}

.ball {
  background-color: #4c7ebf;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

document.querySelector("#play").addEventListener("click", startAnimation, false);
document.querySelector("#pause").addEventListener("click", pauseAnimation, false);
document.querySelector("#reverse").addEventListener("click", reverseAnimation, false);
document.querySelector("#fast").addEventListener("click", fastForward, false);

const keyframes = [
  { transform: 'translateY(0)', easing: 'ease-in' },
  { transform: 'translateY(145px) scale(1, 1)', offset: 0.6 },
  { transform: 'translateY(150px) scale(1.3, 0.6)', offset: 0.7 },
  { transform: 'translateY(80px) scale(1, 1)', offset: 0.8, easing: 'ease-out' },
  { transform: 'translateY(0)', easing: 'ease-out' }
];

const options = {
  duration: 900,
  iterations: 2
};

const ball = document.querySelector(".ball").animate(
  keyframes,
  options
);
ball.pause();

function startAnimation() {
  ball.playbackRate = 1;
  ball.play();
}

function pauseAnimation() {
  ball.pause();
}

function reverseAnimation() {
  // ball.reverse();
  ball.playbackRate = -1;
  ball.play();
}

function fastForward() {
  ball.playbackRate *= 1.5;
  ball.play();
}