article:
Typography: Font Awesome
article:
Elements Design: Dark Search Box and Drop Down

Tutorial: Notification bubble with CSS3 keyframe animation

Advertisement

This is a simple and practical example on how to use a CSS3 animation to enhance user experience.

Tutorial: Notification bubble with CSS3 keyframe animation


html:

<ul class="menu">
    <li><a href="">Dashboard</a></li>
    <li><a href="">Stats</a></li>
    <li>
      <a href="">
        Todo list
        <span class="bubble">9</span>
      </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 



source
demo

Advertisement
Tags: notification, bubble, css, css3, html, jquery

Leave a Comment

No Comment

© Creative3x Ltd.