A CodePen by atdrago. Card Flip Animation

index.html

<div class="container">
  <div class="front">front</div>
  <div class="back">back</div>
</div>

script.js

$(function () {
  $("div.container").on("click", function () {
    var $this = $(this);

    if (!$this.hasClass("on"))
      $this.removeClass("off").addClass("on");
    else
      $this.removeClass("on").addClass("off");
  });
});

style.css

@keyframes flip-to-back {
  0% {
    transform: rotateY(0deg) scale(1); 
  }
  50% {
    transform: rotateY(90deg) scale(0.95);
  }
  100% {
    transform: rotateY(180deg) scale(1);
  }
}
@keyframes flip-to-front {
  0% {
    transform: rotateY(180deg) scale(1); 
  }
  50% {
    transform: rotateY(270deg) scale(0.95);
  }
  100% {
    transform: rotateY(360deg) scale(1);
  }
}
body {
  perspective: 1500;
  perspective-origin: 0 50%;
}
.container {
  width: 150px;
  height: 150px;
  border: 1px solid black;
  position: relative;
}
.container.on {
  animation: flip-to-back 700ms linear forwards;
}
.container.off {
  animation: flip-to-front 700ms linear;
}
.front,
.back {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: visibility 0 linear 350ms;  
}
.front {
  visibility: visible;
  background: red;
}
.back {
  visibility: hidden;
  transform: rotateY(180deg);
  background: blue;
}
.container.on .front {
  visibility: hidden;
}
.container.on .back {
  visibility: visible;
}