<div id="anime-demo">
  <div class="line">
    <div class="square blue"></div>
    <div class="square red"></div>
    <div class="square" id="special"></div>
    <div class="square blue"></div>
    <div class="square red"></div>
    <div class="square black"></div>
    <div class="square blue"></div>
    <div class="square red"></div>
    <div class="square black"></div>
  </div>
</div>
<div class="controls">
<button class="play-special">Animate Special</button>
<button class="play-blue">Animate First Blue</button>
<button class="play-red-blue">Animate Red and Blue</button>
<button class="play-even">Animate Even</button>
<button class="play-not-red">Animate Non-Red Elements</button></div>
body {
  margin: 20px;
  font-family: 'Lato';
  font-weight: 300;
  text-align: center;
  font-size: 1.2em;
}

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: 50px;
  height: 50px;
  background-color: cornflowerblue;
  margin: 4px;
  display: inline-block;
}

.blue {
  background: blue;
}

.red {
  background: red;
}

.black {
  background: black;
}

#special {
  background: orange;
}

.controls {
  margin-top: 250px;
}
var special = anime({
  targets: document.getElementById('special'),
  translateY: 200,
  autoplay: false
});

var blue = anime({
  targets: document.querySelector('.blue'),
  translateY: 200,
  autoplay: false
});

var redBlue = anime({
  targets: document.querySelectorAll('.red, .blue'),
  translateY: 200,
  autoplay: false
});

var even = anime({
  targets: document.querySelectorAll('.square:nth-child(even)'),
  translateY: 200,
  autoplay: false
});

var notRed = anime({
  targets: document.querySelectorAll('.square:not(.red)'),
  translateY: 200,
  autoplay: false
});

document.querySelector('.play-special').onclick = special.restart;

document.querySelector('.play-blue').onclick = blue.restart;

document.querySelector('.play-red-blue').onclick = redBlue.restart;

document.querySelector('.play-even').onclick = even.restart;

document.querySelector('.play-not-red').onclick = notRed.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