<div id="anime-demo">
  <div class="line">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
  </div>
</div>
<div class="controls">
<button class="play-slow">Animate Slowly</button>
<button class="play-fast">Animate Quickly</button>
<button class="play-delay">Delayed Animation</button>
<button class="play-linear">Linear Animation</button>
<button class="play-cubic">Cubic Animation</button></div>

body {
  margin: 20px;
  font-family: 'Lato';
  font-weight: 300;
  font-size: 1.2em;
  text-align: center;
}

button {
  background: orange;
  color: white;
  margin: 5px;
  padding: 10px;
  border-radius: 4px;
  font-family: 'Lato';
  cursor: pointer;
  border: none;
  outline: none;
}

button:hover {
  background: blue;
}

.square {
  pointer-events: none;
  position: relative;
  width: 80px;
  height: 80px;
  background-color: black;
  margin: 4px;
  display: inline-block;
}

.controls {
  margin-top: 300px;
}

var slowAnimation = anime({
  targets: '.square',
  translateY: 250,
  borderRadius: 50,
  duration: 4000,
  autoplay: false
});

var fastAnimation = anime({
  targets: '.square',
  translateY: 250,
  borderRadius: 50,
  duration: 600,
  autoplay: false
});

var delayAnimation = anime({
  targets: '.square',
  translateY: 250,
  borderRadius: 50,
  delay: 800,
  autoplay: false
});

var linearAnimation = anime({
  targets: '.square',
  translateY: 250,
  borderRadius: 50,
  easing: 'linear',
  autoplay: false
});

var cubicAnimation = anime({
  targets: '.square',
  translateY: 250,
  borderRadius: 50,
  duration: 1200,
  easing: 'easeInOutCubic',
  autoplay: false
});


document.querySelector('.play-slow').onclick = slowAnimation.restart;
document.querySelector('.play-fast').onclick = fastAnimation.restart;
document.querySelector('.play-delay').onclick = delayAnimation.restart;
document.querySelector('.play-linear').onclick = linearAnimation.restart;
document.querySelector('.play-cubic').onclick = cubicAnimation.restart;