CSS Animation Card Flip

I've made a card flip with CSS keyframes but instead of flipping clockwise and then flip counterclockwise to it's original position, I've two separate keyframes that will cause it to rotate in the same direction each time I rotate.

I have jQuery checking if either class exists and adding the first one if neither exists and then I toggle the classes to keep this effect going indefinitely.

Is there a better way of writing this CSS to condense this into one class and have JavaScript just toggle that one class instead of two? If not, is there a better approach to handling the JavaScript?



$(".click").click(function () {
$flipper = $(".flipper");

if (!$flipper.hasClass("flipped") && !$flipper.hasClass("second-flip")) {
$flipper.addClass("flipped");
} else {
$flipper.toggleClass("flipped");
$flipper.toggleClass("second-flip");
}
});
.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 {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(180deg); }
}

@keyframes spin360 {
0% { transform: rotateY(180deg); }
100% { transform: rotateY(360deg); }
}





Front



Back



Click me

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);
}
}





Front



Back



Click me

StackExchange Code Review Q#116815, answer score: 3