<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <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;} }