css 动画效果 -- transition

/*nsn */
.social li a{ -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
/* social links */
.social { clear:right; float:right; list-style:none; margin:34px 0 10px 0; }
.social li { display:inline-block; text-indent:-999em; }
.social li a { display:block; width:50px; height:50px; margin-left:5px; background-image:url(../img/background/social.png); background-repeat:no-repeat; 
  -webkit-border-radius: 25px;
     -moz-border-radius: 25px;
          border-radius: 25px;
  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}

.social li:first-child a { margin-left:0; } 
.social li a:hover { border-top-left-radius:0px;  border-bottom-right-radius:0px;}
.social li a.facebook:hover { background-color:#3c5fac; }
.social li a.twitter { background-position:-32px 0; }
.social li a.twitter:hover { background-color:#5ec3df; }
.social li a.flickr { background-position:-64px 0; }
.social li a.flickr:hover { background-color:#FF0084; }
.social li a.rss { background-position:-96px 0; }
.social li a.rss:hover { background-color:#ff9900; }
.social li a.dribble { background-position:-128px 0; }
.social li a.dribble:hover { background-color:#EA4C89; }
.social li a.lastfm { background-position:-160px 0; }
.social li a.lastfm:hover { background-color:#D51007; }
.social li a.linkedin { background-position:-192px 0; }
.social li a.linkedin:hover { background-color:#2089b5; }
.social li a.vimeo { background-position:-224px 0; }
.social li a.vimeo:hover { background-color:#0dadd6; }
.social li a.google { background-position:-256px 0; }
.social li a.google:hover { background-color:#c63d2d; }
.social li a.forrst { background-position:-288px 0; }
.social li a.forrst:hover { background-color:#5b9a68; }
.social li a.skype { background-position:-320px 0; }
.social li a.skype:hover { background-color:#00aff0; }
.social li a.picassa { background-position:-352px 0; }
.social li a.picassa:hover { background-color:#ffd34e; }
.social li a.youtube { background-position:-384px 0; }
.social li a.youtube:hover { background-color:#c8312b; }
.social li a.pinterest { background-position:-416px 0; }
.social li a.pinterest:hover { background-color:#cb2027; }
.social li a.tumblr { background-image: url(../img/background/tumblr.png); }
.social li a.tumblr:hover { background-color: #2C4762; }

.social li a { background-color:#bbb; }

html:

    
Facebook
    
Twitter
    
LinkedIn
    
Flickr
    
Last.fm
    
Vimeo