'animation-direction' not working. Why? - css

Question

Here's the fiddle: http://jsfiddle.net/joplomacedo/mnj8n/
#-webkit-keyframes half-flip {
0% { -webkit-transform: rotateX(0deg); }
100% { -webkit-transform: rotateX(90deg); }
}
.half-flip-out {
-webkit-animation: half-flip 1s;
-webkit-transform: rotateX(90deg);
}
.half-flip-in {
-webkit-animation: half-flip 1s reverse;
-webkit-transform: rotateX(0deg);
}
I'm toggling the classes with jQuery. For some reason, .half-flip-in is doing exactly the same as .half-lip-out. I can't figure out why.

Answer 1

The problem does not lie in animation-direction. I'll explain more later so let's just dive into it for now.
Your CSS3 keyframes animation declarations should look like this instead:
#-webkit-keyframes half-flip {
0% {
-webkit-transform: rotateX(0deg);
}
100% {
-webkit-transform: rotateX(90deg);
}
}
#-webkit-keyframes half-flip02 {
0% {
-webkit-transform: rotateX(90deg);
}
100% {
-webkit-transform: rotateX(0deg);
}
}
.half-flip-out {
-webkit-animation: half-flip 1s;
}
.half-flip-in {
-webkit-animation: half-flip02 1s;
}
As you can see in the above, there are 2 #-webkit-keyframes declarations - each being the direct opposite of the other. Note also that I removed -webkit-transform: rotateX(0deg); and -webkit-transform: rotateX(90deg); from both .half-flip-out and .half-flip-in. The reason is simple: It is already defined in the keyframes animation at 0%, which is the 1st frame, and at 100%, which is the last frame.
Next, you should clear up your jQuery. It is not necessary to use a counter to decide which class to add or remove from the DIV. Also, shorter codes in jQuery equates to faster execution. Always optimize your codes.
This is how your jQuery looks like:
var folding_img_wrap = $('.folding_img_wrap'),
toggle_count = 0;
$('.toggle').on('click', function() {
if (toggle_count % 2 === 0) {
folding_img_wrap.addClass('half-flip-out').removeClass('half-flip-in');
} else {
folding_img_wrap.removeClass('half-flip-out').addClass('half-flip-in');
}
toggle_count++;
});
And this is how I recommend it should be:
var folding_img_wrap = $('.folding_img_wrap'),
$(".toggle").toggle(function(){
folding_img_wrap.addClass('half-flip-in').removeClass('half-flip-out');
},function(){
folding_img_wrap.removeClass('half-flip-out').addClass('half-flip-in');
});
You can view my solution here.
Remember also to use the -moz- prefixes for your CSS3 declarations otherwise, this is only gonna be working on Chrome & Safari. Also note that keyframes isn't supported in IE9 or in Opera.