Edit in JSFiddle

var el = document.querySelector(".container");
var controller = Animate(el);
el.addEventListener("click", function() {
    // mixture
    controller
    .end("flipInY", 'rotateInDownLeft')
    .end("rotateInDownLeft", 'bounceOutDown')
    .end('bounceOutDown', function() {
        this
        .removeAll()
        .sequence('flip', 'flipInX', 'flipOutX', 'flipOutY', 'fadeIn', 'fadeInUp', 'fadeInDown', 'fadeInLeft', 'fadeInRight', 'fadeInUpBig', 'fadeInDownBig', 'fadeInLeftBig', 'fadeInRightBig', 'fadeOut', 'fadeOutUp', 'fadeOutDown', 'fadeOutLeft', 'fadeOutRight', 'fadeOutUpBig', 'fadeOutDownBig', 'fadeOutLeftBig', 'fadeOutRightBig', 'bounceIn', 'bounceInDown', 'bounceInUp', 'bounceInLeft', 'bounceInRight', 'bounceOut', 'bounceOutUp', 'bounceOutLeft', 'bounceOutRight', 'rotateIn', 'rotateInDownRight', 'rotateInUpLeft', 'rotateInUpRight', 'rotateOut', 'rotateOutDownLeft', 'rotateOutDownRight', 'rotateOutUpLeft', 'rotateOutUpRight', 'lightSpeedIn', 'lightSpeedOut', 'hinge', 'rollIn', 'rollOut');
    })
    .add("flipInY");
});

<div class="container animated">
    <div class="star">★</div>
    <span>click me</span>
</div>

.container {
    font-size: 40px;
    background: #C9C9C9;
    padding: 20px;
    width: 100px;
    text-align: center;
    border-radius: 6px;
    margin: 0 auto;
    cursor: pointer;
    line-height: 20px;
}
.container span {
    display: block;
    margin: 12px 0 0 0;
    font-size: 16px;
    font-weight: bold;
}