CSS3 rotate animation causes Animate.css shake animation to disappear

Question

Whenever I execute an Animate.css shake animation after a CSS3 rotate animation the div being shook will disappear. This only happens on the back-face of the rotated divs. The front-face doesn't have this issue.

I've put together a jsfiddle to demonstrate the problem.

http://jsfiddle.net/kG9Ld/1/

HTML

<div class="wrappers">
  <div class="wrapper shaker front">
    <p>Front</p>
    <p><a href="#" class="flip">Flip</a></p>
    <p><a href="#" class="shake">Shake</a></p>
  </div>
  <div class="wrapper shaker back">
    <p>Back</p>
    <p><a href="#" class="flip">Flip</a></p>
    <p><a href="#" class="shake">Shake</a></p>
  </div>
</div>

CSS

.wrappers {
  -webkit-transition:-webkit-transform 1s;
  -moz-transition:-moz-transform 1s;
  -ms-transition:-ms-transform 1s;
  -o-transition:-o-transform 1s;
  transition: transform 1s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.wrapper {
    height: 100px;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: absolute;
    width: 100px;
}
.front {
    background-color: red;
    z-index: 3;
}
.back {
    background-color: green;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
    z-index: 1;
}
.flipped {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.flipped .back {
    z-index: 3;
}

JavaScript

$('.flip').on('click', function (e) {
    $wrappers = $('.wrappers');

    $wrappers.toggleClass('flipped');
});

$('.shake').on('click', function (e) {
    $('.shaker').addClass('animated shake');
});

$('.shaker').on('webkitAnimationEnd mozAnimationEnd oAnimationEnd animationEnd', function(e) {
    $('.shaker').removeClass('animated shake');
});

Answer 1

The problem was that the shaking animation's transform property was overwriting the .back element's transform property: rotateY(180deg).

The solution would just be to modify the animation and use a combination of transformations:

WORKING EXAMPLE HERE

-webkit-transform: translateX(0) rotateY(180deg);

This would of course require new keyframes:

@-webkit-keyframes shakeBack {
  0%, 100% {
    -webkit-transform: translateX(0) rotateY(180deg);
    transform: translateX(0) rotateY(180deg);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px) rotateY(180deg);
    transform: translateX(-10px) rotateY(180deg);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px) rotateY(180deg);
    transform: translateX(10px) rotateY(180deg);
  }
}

You now need to add a different animation based on whether the front/back of the element is visible.

.shakeBack {
  -webkit-animation-name: shakeBack;
  animation-name: shakeBack;
}

Modified JS - this could be written better, but you get the point.

$('.shaker.front .shake').on('click', function (e) {
    $(this).parents('.shaker').addClass('animated shake');
});
$('.shaker.back .shake').on('click', function (e) {
    $(this).parents('.shaker').addClass('animated shakeBack');
});