CSS Animation Card Flip
jQuery's .toggleClass() function allows you to determine the class name to be toggled by passing a function as the first argument: 

$(".click").click(function() {
  $(".flipper").toggleClass(function() {
    if ($(this).is(".flipped")) {
      return "second-flip";
    } else {
      return "flipped";
    }
  });
});


Making your Javascript code cleaner and more usable. :)



$(".click").click(function() {
  $(".flipper").toggleClass(function() {
    if ($(this).is(".flipped")) {
      return "second-flip";
    } else {
      return "flipped";
    }
  });
});
.flip-container {
  height: 150px;
  width: 150px;
  perspective: 600;
  position: relative;
}
.flipper {
  height: 100%;
  width: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
}
.back,
.front {
  height: 100%;
  width: 100%;
  display: block;
  position: absolute;
  backface-visibility: hidden;
}
.front {
  background-color: red;
}
.back {
  background-color: blue;
  transform: rotateY(180deg);
}
.flipped {
  animation: spin180 1s 1 forwards;
}
.second-flip {
  animation: spin360 1s 1 forwards;
}
@keyframes spin180 {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(180deg);
  }
}
@keyframes spin360 {
  from {
    transform: rotateY(180deg);
  }
  to {
    transform: rotateY(360deg);
  }
}
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;div class="flip-container"&gt;
  &lt;div class="flipper"&gt;
    &lt;div class="face front"&gt;
      &lt;p&gt;Front&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="face back"&gt;
      &lt;p&gt;Back&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;button class="click"&gt;Click me&lt;/button&gt;