Animated Notification bubble icon with CSS3 keyframe animation

HTML

<ul>
    <li><a href="">Dashboard</a></li>
    <li><a href="">Friends</a></li>
    <li>
     <a href="">Message
      <span>9</span>
     </a>
    </li>
    <li><a href="">Games</a></li>
    <li><a href="">Settings</a></li>
</ul>

CSS

.animating{
 animation: animate 1s cubic-bezier(0,1,1,0);   
}

@keyframes animate{
 from {
    transform: scale(1);
 }
 to {
    transform: scale(1.7);
 }
}

jQuery




var counterValue = parseInt($('.bubble').html()); // Get the current bubble value

function removeAnimation(){
 setTimeout(function() {
  $('.bubble').removeClass('animating')
 }, 1000);   
}

$('#decrease').on('click',function(){
 counterValue--; // decrement
 $('.bubble').html(counterValue).addClass('animating'); // animate it
 removeAnimation(); // remove CSS animating class
})

$('#increase').on('click',function(){
 counterValue++; // increment
 $('.bubble').html(counterValue).addClass('animating'); // animate it
        removeAnimation(); // remove CSS animating class




http://cloud.github.com/downloads/Dhirajkumar/Demos/Notification_bubble_with_CSS3_keyframe_animation.htm