<button class="start">Start Animation</button>
<div>
  <div class="box a"></div>
  <div class="box b"></div>
  <div class="box c"></div>
</div>
body {
  margin: 20px;
  font-family: 'Lato';
  font-weight: 300;
  text-align: center;
}

.box {
  width: 100px;
  height: 100px;
  display: inline-block;
  border: 2px solid black;
  margin: 10px;
  position: relative;
  top: 0px;
}

.a {
  background: orange;
}

.b {
  background: red;
}

.c {
  background: yellow;
}

button {
  background: wheat;
  border: 1px solid black;
  font-family: 'Lato';
  border-radius: 5px;
  padding: 8px;
  margin: 20px 0;
  outline: none;
  cursor: pointer;
}
var theBoxes = document.querySelectorAll(".box");
var boxA = document.querySelector(".a");
var boxB = document.querySelector(".b");
var startButton = document.querySelector(".start");

var animateAll = KUTE.allFromTo(
  theBoxes,
  { translateY: 0 },
  { translateY: 100 },
  { offset: 1000 }
);

var animateA = KUTE.fromTo(
  boxA,
  { translateZ: 0 },
  { translateZ: 50 },
  { parentPerspective: 100, parentPerspectiveOrigin: "0% 0%" }
);

var animateB = KUTE.fromTo(
  boxB,
  { translateX: 0 },
  { translateX: -200 }
);

startButton.addEventListener(
  "click",
  function() {
    animateAll.start();
    animateA.start();
    animateB.start();
  },
  false
);

External CSS

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

External JavaScript

  1. https://cdn.jsdelivr.net/kute.js/1.6.2/kute.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js