CSS3 rotate animation causes Animate.css shake animation to disappear - css

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>Flip</p>
<p>Shake</p>
</div>
<div class="wrapper shaker back">
<p>Back</p>
<p>Flip</p>
<p>Shake</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');
});