<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-translate">Animate Translation</button>
<button class="play-scale">Animate Scaling</button>
<button class="play-rotate">Animate Rotation</button>
<button class="play-radius">Animate Border Radius</button>
<button class="play-all">Animate Everything</button>
</div>
body {
  margin: 20px 0px;
  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: 16px;
  display: inline-block;
  border: 6px solid orange;
}

.controls {
  margin-top: 300px;
}
var keyframeTranslation = anime({
  targets: '.square',
  translateY: [
    { value: 100, duration: 500},
    { value: 300, duration: 1000, delay: 1000},
    { value: 40, duration: 500, delay: 1000}
  ],
  autoplay: false
});

var keyframeScaling = anime({
  targets: '.square',
  scale: [
    { value: 1.1, duration: 500},
    { value: 0.5, duration: 1000, delay: 1000},
    { value: 1, duration: 500, delay: 1000}
  ],
  autoplay: false
});

var keyframeRotation = anime({
  targets: '.square',
  rotate: [
    { value: 60, duration: 500},
    { value: -60, duration: 1000, delay: 1000},
    { value: 75, duration: 500, delay: 1000}
  ],
  autoplay: false
});

var keyframeRadius = anime({
  targets: '.square',
  borderRadius: [
    { value: 10, duration: 500},
    { value: 50, duration: 1000, delay: 1000},
    { value: 25, duration: 500, delay: 1000}
  ],
  autoplay: false
});

var keyframeAll = anime({
  targets: '.square',
  translateY: [
    { value: 100, duration: 500},
    { value: 300, duration: 1000, delay: 1000},
    { value: 40, duration: 500, delay: 1000}
  ],
  scale: [
    { value: 1.1, duration: 500},
    { value: 0.5, duration: 1000, delay: 1000},
    { value: 1, duration: 500, delay: 1000}
  ],
  rotate: [
    { value: 60, duration: 500},
    { value: -60, duration: 1000, delay: 1000},
    { value: 75, duration: 500, delay: 1000}
  ],
  borderRadius: [
    { value: 10, duration: 500},
    { value: 50, duration: 1000, delay: 1000},
    { value: 25, duration: 500, delay: 1000}
  ],
  delay: function(el, i) { return 100*(i+1) },
  autoplay: false
});

document.querySelector('.play-translate').onclick = keyframeTranslation.restart;
document.querySelector('.play-scale').onclick = keyframeScaling.restart;
document.querySelector('.play-rotate').onclick = keyframeRotation.restart;
document.querySelector('.play-radius').onclick = keyframeRadius.restart;
document.querySelector('.play-all').onclick = keyframeAll.restart;

External CSS

  1. https://fonts.googleapis.com/css?family=Lato:300

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js