Edit in JSFiddle

var element = document.querySelector(".star");
element.addEventListener("click", function() {
    if(element.className.indexOf('rotateInDownLeft') === -1) {
        element.className += ' rotateInDownLeft';
    } else {
        element.className = element.className.replace('rotateInDownLeft', 'bounceOutRight');
    }
});
function whichTransitionEvent(el){
    var t;
    var transitions = {
        'transition': 'transitionend',
        'OTransition': 'oTransitionEnd',
        'MozTransition': 'transitionend',
        'WebkitTransition': 'webkitTransitionEnd'
    }
    for(t in transitions){
        if( el.style[t] !== undefined ){
            return transitions[t];
        }
    }
}
function whichAnimationEvent(el){
    var a;
    var animations = {
        'animation': 'animationend',
        'OAnimation': 'oAnimationEnd',
        'MozAnimation': 'animationend',
        'WebkitAnimation': 'webkitAnimationEnd'
    }
    for(a in animations){
        if( el.style[a] !== undefined ){
            return animations[a];
        }
    }
}
var transitionEnd = whichTransitionEvent(element);
var animationEnd = whichAnimationEvent(element);
var onEnd = function(e) {
    if(e.animationName === 'bounceOutRight') {
        element.className = element.className.replace(/rotateInDownLeft/g, '').replace(/bounceOutRight/g, '');
    } else {
        element.innerHTML = element.innerHTML.replace('click me', 'click me again');
    }
}
element.addEventListener(transitionEnd, onEnd); 
element.addEventListener(animationEnd, onEnd); 

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

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