<h1>Example with animation-fill-mode: backwards (2)</h1>

<div class="ball"></div>

<button>START</button>

<button>RESET</button>

body {
  padding: 15px;
  text-align: center;
}

@keyframes myAnim {
  
  from {
    background-color: green;
  }

  to {
    background-color: blue;
    transform: translateX(500px) scale(.5);
  }
  
}

@keyframes reset {

  50% {
    background-color: white;
  }
  
  to {
    background-color: red;
  }
  
}

.ball {
  width: 200px;
  height: 200px;
  background: red;
  border-radius: 50%;
}

.doAnim {
  animation-name: myAnim;
  animation-duration: 2s;
  animation-fill-mode: backwards;
  animation-delay: 1s;
}

.reset {
  animation: reset .5s;
}

button {
  margin: 50px 20px;
}

.p {
  padding-top: 100px;
}

var start = document.querySelectorAll('button')[0],
    reset = document.querySelectorAll('button')[1],
    ball = document.querySelector('.ball');

start.addEventListener('click', function () {
  ball.classList.add('doAnim');
  ball.classList.remove('reset');
}, false);

reset.addEventListener('click', function () {
  ball.classList.remove('doAnim');
  ball.classList.add('reset');
}, false);