<p>animation-fill-mode: forwards;</p>
<div class="square-1 square" data-animation-name="animate-1"></div>
<p>animation-fill-mode: backwards;</p>
<div class="square-2 square" data-animation-name="animate-2"></div>
<p>animation-fill-mode: both;</p>
<div class="square-3 square" data-animation-name="animate-3"></div>
* {
  font-family: monospace;
}

body {
  background-color: #e3e3e3
}

.square {
  width: 50px;
  height: 50px;
}

.square-1 {
  background-color: #1abc9c;
}

.square-2 {
  background-color: #2ecc71;
}

.square-3 {
  background-color: #3498db;
}

.animate-1 {
  animation-name: anim-1;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

.animate-2 {
  animation-name: anim-1;
  animation-duration: 3s;
  animation-fill-mode: backwards;
}

.animate-3 {
  animation-name: anim-1;
  animation-duration: 3s;
  animation-fill-mode: both;
}

@keyframes anim-1 {
  to {
    width: 100%;
  }
}
$(document).ready(function() {
  $(".square").click(function() {
    var elemData = $(this).attr("data-animation-name")
    $(this).toggleClass(elemData)
  })
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js