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:

<ul class="social">    <li><a target="_blank" class="facebook" href="http://www.facebook.com">Facebook</a></li>    <li><a target="_blank" class="twitter" href="http://www.twitter.com">Twitter</a></li>    <li><a target="_blank" class="linkedin" href="http://www.linkedin.com">LinkedIn</a></li>    <li><a target="_blank" class="flickr" href="http://www.flickr.com">Flickr</a></li>    <li><a target="_blank" class="lastfm" href="http://www.last.fm">Last.fm</a></li>    <li><a target="_blank" class="vimeo" href="http://www.vimeo.com">Vimeo</a></li></ul>