Animated
<div class="outside">
    <div class="inside">
    </div>
</div>
/* play by:
** @webbeloz
** Pubblic Profile/Members > Registered*
*/
html, body {
  position: relative;
  height:100%;
}
body, webbeloz {
  display:-webkit-flex;
  display:flex;
  margin:0 1%;
  font-size:100%;
  justify-content:space-around;
}
.outside {
    border: 1px solid orange;
    height: 100px;
    width: 100px;
    position: relative;
	align-self:center;
}
.inside {
    border: 1px solid skyblue;
    height: 60px;
    width: 60px;
    margin-top: -31px;
    margin-left: -31px;
    position: absolute;
    top: 50%;
    left: 50%;
}
.outside.animate {
    animation-delay: 0s, .5s, .5s;
    animation-duration: 500ms, 1000ms, 1000ms;
    animation-name: button-bounce, rotate, skyblue;
}
.animate {
    animation-fill-mode: forwards;
    animation-timing-function: ease;
    transform: translateZ(0);
}
.outside.animate .inside {
    animation-delay: .5s, .5s, 1.5s;
    animation-duration: 1000ms, 1000ms, 750ms;
    animation-name: rotate, orange, scale-in;
}
@keyframes scale-in {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}
@keyframes button-scale-in {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}
@keyframes button-bounce {
  0% { transform: scale(1); }
  25% { transform: scale(.8); }
  50% { transform: scale(1); }
  75% { transform: scale(.9); }
  100% { transform: scale(1); }
}
@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes orange {
    0% { border: 1px solid orange; }
    99.99% { border: 1px solid orange; }
    100% { border: 1px solid skyblue; }
}
@keyframes skyblue {
    0% { border: 1px solid skyblue; }
    99.99% { border: 1px solid skyblue; }
    100% { border: 1px solid orange; }
}
$(document).ready(function() {
  
  $(document).click(function() {
	var count = 0;
	var jqElement = $('.outside');
	if (!jqElement.hasClass('animate')) {
	  jqElement.addClass('animate');
	  jqElement.on('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function(event) {
		count++;
		if (count >= 6) {
		  jqElement.off('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd');
		  jqElement.removeClass('animate');
		  }
		});
	  }
	});
});