1

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.

1 Answer 1

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.

5
  • 1
    w3.org/TR/css3-animations/#animation-direction-property . This is where i believe you should be looking at for the official specs. W3schools is "spam/rubbish" as do the experts say. reverse is part of the official spec. Its implemented by mozilla, webkit and ie. as to opera browsers im not sure. I didnt know about that toggle function. Thats cool. Havent read that much into jquery yet. You do have to specify the transforms out of the animation as styles specified in the animation are spectic to the animation. Theyre not extended out of it.
    – Paulo R.
    Jun 26, 2012 at 2:01
  • ... You could use forwards in the animation declaration to get that extension, but for. progressive enhancement reasons (suppose animations arent yet suuported, but transforms are) i chose to opt for the way i did it instead of using forwards. Thanks for the answer though.
    – Paulo R.
    Jun 26, 2012 at 2:02
  • See the reverse in action here -> jsfiddle.net/mnj8n/26 -> It works, you see? the problem comes from using transforms in the animation. It must be a bug.
    – Paulo R.
    Jun 26, 2012 at 2:21
  • Of course, you could also tell me the simplest way to do this would be to rely on transitions alone as we're simply animating from one state to another with no intermediary states. I know that too. I encountered this in a more complex case, and wondered why it wasn't working, hence the question.
    – Paulo R.
    Jun 26, 2012 at 2:26
  • @JOPLOmacedo : You're right about the reverse value. I have edited my answer based on the information that you've provided. +1 for clarification.
    – vynx
    Jun 26, 2012 at 7:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.