CSS3 вращение анимации приводит к исчезновению анимации анимации Animal.css

Question

Всякий раз, когда я запускаю анимацию анимации Animate.css после вращения анимации CSS3, исчезновение div исчезнет. Это происходит только на обратной стороне вращающихся div. На лицевой стороне этой проблемы нет.

Я собрал jsfiddle, чтобы продемонстрировать проблему.

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

Проблема заключалась в том, что встряхивания анимация чужое имущество преобразования была перезаписана свойство преобразования .back: rotateY(180deg).

Решение будет просто изменить анимацию и использовать комбинацию преобразований:

WORKING EXAMPLE HERE

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

Это, конечно, потребует новых ключевых кадров:

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

Теперь вам нужно для добавления другой анимации, основанной на видимости передней/задней части элемента.

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

Модифицированный JS - это могло бы быть написано лучше, но вы поняли суть.

$('.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'); 
});