<p>animation-direction: normal;</p>
<div class="square-1 square" data-animation-name="animate-1"></div>
<p>animation-direction: reverse;</p>
<div class="square-2 square" data-animation-name="animate-2"></div>
<p>animation-direction: alternate;</p>
<div class="square-3 square" data-animation-name="animate-3"></div>
<p>animation-direction: alternate-reverse;</p>
<div class="square-4 square" data-animation-name="animate-4"></div>
* {
  font-family: monospace;
}

body {
  background-color: #e3e3e3
}

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

.square-1 {
  background-color: #2c3e50;
}

.square-2 {
  background-color: #8e44ad;
}

.square-3 {
  background-color: #e74c3c;
}
.square-4 {
  background-color: #f39c12;
}

.animate-1 {
  animation-name: anim-1;
  animation-duration: 2s;
  animation-iteration-count:10;
  animation-direction: normal;
}

.animate-2 {
  animation-name: anim-1;
  animation-duration: 2s;
  animation-iteration-count:10;
  animation-direction: reverse;
}

.animate-3 {
  animation-name: anim-1;
  animation-duration: 2s;
  animation-iteration-count:10;
  animation-direction: alternate;
}
.animate-4 {
  animation-name: anim-1;
  animation-duration: 2s;
  animation-iteration-count:10;
  animation-direction: alternate-reverse;
}

/* @keyframes anim-1 {
  to {
    width: 100%;
  }
} */
@keyframes anim-1 {
  to {
    transform:rotate(270deg);
  }
}
$(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