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 classhttp://cloud.github.com/downloads/Dhirajkumar/Demos/Notification_bubble_with_CSS3_keyframe_animation.htm
Comments
Post a Comment