<h1>Example with animation-fill-mode: both</h1>

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

<button>START THE ANIMATION</button>

<button>RESET THE ANIMATION</button>

<p class="p">Demo by Louis Lazaris. <a href="http://www.sitepoint.com/understanding-css-animation-fill-mode-property" target="_blank">See article</a>.</p>

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

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

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

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

.doAnim {
  animation: myAnim 2s both 1s;
}

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');
}, false);

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