CSS3 pulse effect

Today I was playing around with CSS3 keyframes and I’ve made a small experiment that makes a pulse effect on some social icons. The experiment is quite easy to make and I will detail a bit every part of the CSS3 code. The code is free to use in both commercial and personal projects. Lets begin.

The HTML

The HTML is quite simple, having 3 containers for every separated icon, each container having the icon background and the rays that make the effect pulse.

The CSS

Basically the CSS is the thing that does all the magic. Taking the new keyframe support (this experiment is tested only in Chrome and FF), we can easily add some custom endless looping pulse rays on the social icon background. You can easily setup the rays radius (currently is 100px), border size or color, the opacity and height or position. Check the “.rays” class for more info. The icons are done via CSS sprites (check .facebook, .twitter, .rss) and the image is encoded so we can use it online. I’m not going to put the image in the CSS bellow because it takes to much space. You can always view it on the jsFiddle example.

@-webkit-keyframes pulse 
{       
    0% {-webkit-transform: scale(0); opacity: 0;}
    8% {-webkit-transform: scale(0); opacity: 0;}
    15% {-webkit-transform: scale(0.1); opacity: 1;}
    30% {-webkit-transform: scale(0.5); opacity: 1;}
    100% {opacity: 0; -webkit-transform: scale(1);}
 }

 @-moz-keyframes pulse 
{       
    0% {-moz-transform: scale(0); opacity: 0;}
    8% {-moz-transform: scale(0); opacity: 0;}
    15% {-moz-transform: scale(0.1); opacity: 1;}
    30% {-moz-transform: scale(0.5); opacity: 1;}
    100% {opacity: 0; -moz-transform: scale(1);}
}
  
.holder {
    display: block;
    margin:30px 0 0 60px;
    float:left;
}

.holder .rays {
    margin:0 auto;
    z-index: 10;
    position:relative;
    top:-8px;
    left:-8px;
    background-color: transparent;
    opacity: 0.1;
    width: 48px;
    height: 48px;
    border: 2px solid rgba(0, 128, 64, 1);
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -o-border-radius: 100px;
    -ms-border-radius: 100px;
    border-radius: 100px;
    /* Giving Animation Function */
    -webkit-animation: pulse 2s linear infinite;
    -moz-animation: pulse 2s linear infinite; 
    border-image: initial;
}

.facebook {
     background-position:-3px -2px;
     width:36px;
     height:36px;   
}

.twitter {
     background-position:-48px -2px;
     width:36px;
     height:36px;     
}

.rss {
     background-position:-93px -2px;
     width:36px;
     height:36px;         
}

The result

The result is a nice pulse effect on the social icons. Works only on Chrome and Firefox. The experiment can also be found here

Related Posts

Responsive CSS3 slider with no JavaScript

CSS3 transitions with jQuery

Add CSS3 specific browser prefixes automatically

iPad shine effect using CSS3 and JavaScript

Leave a Reply