Edit in JSFiddle

<h1>Social Icon Animation</h1>
<div id="socialicons">
<div class="socialicon">
<div class="dribbblecolor socialiconcircle1"></div>
<div class="socialiconcircle2">
<i class="fa icons fa-dribbble dribbble"></i>
</div> 
</div>
<div class="socialicon">
<div class="facebookcolor socialiconcircle1"></div>
<div class="socialiconcircle2">
<i class="fa icons fa-facebook-square facebook"></i>
</div> 
</div>
<div class="socialicon">
<div class="googlecolor socialiconcircle1"></div>
<div class="socialiconcircle2">
<i class="fa icons fa-google-plus-square google"></i>
</div> 
</div>
<div class="socialicon">
<div class="flickrcolor socialiconcircle1"></div>
<div class="socialiconcircle2">
<i class="fa icons fa-flickr flickr"></i>
</div> 
</div>                  
<div class="socialicon">
<div class="pinterestcolor socialiconcircle1"></div>
<div class="socialiconcircle2">
<i class="fa icons fa-pinterest-square pinterest"></i>
</div> 
</div>
<div class="socialicon">
<div class="githubcolor socialiconcircle1"></div>
<div class="socialiconcircle2">
<i class="fa icons fa-github-alt github"></i>
</div> 
</div> 
<div class="socialicon">
<div class="linkedincolor socialiconcircle1"></div>
<div class="socialiconcircle2">
<i class="fa icons fa-linkedin-square linkedin"></i>
</div> 
</div>
<div class="socialicon">
<div class="youtubecolor socialiconcircle1"></div>
<div class="socialiconcircle2">
<i class="fa icons fa-youtube-square youtube"></i>
</div> 
</div>
<div class="socialicon">
<div class="tumblrcolor socialiconcircle1"></div>
<div class="socialiconcircle2">
<i class="fa icons fa-tumblr-square tumblr"></i>
</div> 
</div>       
</div>
body{
background:#f5f5f5;
} 

h1
{
text-align:center;
color:#dbdbdb;
font-family:arial;
text-shadow:0px 2px 2px #c1c1c1;
}

#socialicons
{
width:75%;
margin:0 auto;
overflow:auto;
}
  
.socialicon
{
width:100px;
height:100px;
border-radius:50%;
overflow:hidden;
background:#e4e4e4;
position:relative;
float:left;
margin:0px 0px 10px 10px ;
} 

.socialiconcircle1
{
width:150px;
height:150px;
position:absolute;
left:0px;
top:100px;
-webkit-animation:fill 2s infinite;
-moz-animation:fill 2s infinite;
animation:fill 2s infinite;
}

.socialiconcircle2
{
width:94px;
height:94px;
border-radius:50%;
background:#fff;
position:absolute;
left:3px;
top:3px;
}

.icons
{
font-size:2em;
position:absolute;
left: 33px;
top: 33px;
-webkit-animation:iconjump 2s infinite;
-moz-animation:iconjump 2s infinite;
animation:iconjump 2s infinite;  
}

/* fill color */  
.dribbblecolor{background:#ea4c89;}
.facebookcolor{background:#3b5998;} 
.googlecolor{background:#dd4b39;} 
.flickrcolor{background:#ff0084;}
.pinterestcolor{background:#c8232c;}
.youtubecolor{background:#c4302b;}
.githubcolor{background:#171515;}
.linkedincolor{background:#0e76a8;}
.tumblrcolor{background:#34526f;}

/* icons color */  
.dribbble{color:#ea4c89!important}
.facebook{color:#3b5998!important}
.google{color:#dd4b39!important}                                   
.flickr{color:#ff0084!important}
.pinterest{color:#c8232c!important;}
.youtube{color:#c4302b!important;}  
.github{color:#171515!important;}  
.linkedin{color:#0e76a8!important;} 
.tumblr{color:#34526f!important;}


/* fill background */      
@-webkit-keyframes fill
{
0%{top:100px;}
100%{top:0px;}
}

@-moz-keyframes fill
{
0%{top:100px;}
100%{top:0px;}
}

@keyframes fill
{
0%{top:100px;}
100%{top:0px;}
}

/* jump social icons */
@-webkit-keyframes iconjump
{
0%{top:33px;}
10%{top:70px;}
20%{top:33px;}
50%{top:33px;}
90%{top:33px;} 
100%{top:33px;}
}

@-moz-keyframes iconjump
{
0%{top:33px;}
10%{top:70px;}
20%{top:33px;}
50%{top:33px;}
90%{top:33px;} 
100%{top:33px;}
}

@keyframes iconjump
{
0%{top:33px;}
10%{top:70px;}
20%{top:33px;}
50%{top:33px;}
90%{top:33px;} 
100%{top:33px;}
}