<button class="start">Start Animation</button>

<svg>
  <linearGradient id="ored">
        <stop class="stop1" offset="10%" stop-color="orange"/>
        <stop class="stop2" offset="10%" stop-color="red"/>
  </linearGradient>
  <linearGradient id="rpurp">
        <stop class="stop1" offset="10%" stop-color="red"/>
        <stop class="stop2" offset="10%" stop-color="purple"/>
  </linearGradient>
  <linearGradient id="pange">
        <stop class="stop1" offset="10%" stop-color="purple"/>
        <stop class="stop2" offset="10%" stop-color="orange"/>
  </linearGradient>
  <circle r="50" cx="150" cy="100" fill="url(#ored)" stroke="none"/>
  <circle r="50" cx="300" cy="100" fill="url(#rpurp)" stroke="none"/>
  <circle r="50" cx="450" cy="100" fill="url(#pange)" stroke="none"/>
</svg>
body {
  margin: 20px auto;
  font-family: 'Lato';
  font-weight: 300;
  text-align: center;
  width: 600px;
}

svg {
  display: block;
  width: 100%;
  height: 300px;
}

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

var offsetAnimation = KUTE.allTo(
  ".stop1",
  {
    attr: { offset: '90%'}
  },
  {
    repeat: 1,
    offset: 1000,
    yoyo: true,
    easing: 'easingCubicIn'
  }
);

var colorAnimation = KUTE.allTo(
  ".stop2",
  {
    attr: { stopColor: 'black'}
  },
  {
    repeat: 1,
    offset: 1000,
    yoyo: true,
    easing: 'easingCubicIn'
  }
);

var scaleAnimation = KUTE.allTo(
  "circle",
  {
    svgTransform: { scale: 2}
  },
  {
    repeat: 1,
    offset: 1000,
    yoyo: true,
    easing: 'easingCubicIn'
  }
);

startButton.addEventListener(
  "click",
  function() {
    offsetAnimation.start();
    colorAnimation.start();
    scaleAnimation.start();
  },
  false
);

External CSS

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

External JavaScript

  1. https://cdn.jsdelivr.net/kute.js/1.6.2/kute.min.js
  2. https://cdn.jsdelivr.net/kute.js/1.6.2/kute-svg.min.js
  3. https://cdn.jsdelivr.net/kute.js/1.6.2/kute-attr.min.js