CSS3 transition not smooth in Chrome

问题:

I'm using CSS3 transition for animate some links based on the margin value on mouse hover. Its animating as expected, but animation in Chrome is not smooth as in other browsers such as Firefox, IE10.

In Chrome when I hover on a link, all other links are slightly moving. Please check the link below.

CSS

.social {
    list-style: none;
    float: right;
    text-align: right;
    position: relative;
    top: 15px;
}

.social li {
    padding: 2px 0;
}

.social li a {
    font-size: 18px;
    color: #a6a7a6;

    margin-right: 5px;
    -webkit-transition: margin 400ms;
    -moz-transition:  margin 0.2s ease;
    -o-transition:  margin 0.2s ease;
    -ms-transition:  margin 0.2s ease;
    transition: margin 0.2s ease;
}

.social li a:hover {
    color: #1b1b1b;
    margin-right: 23px;

}

.social .ico {
    background-color: #1b1b1b;
    background-position: center center;
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    position: absolute;
    margin-left: 6px;
    opacity: 0;
    filter: alpha(opacity=0);
      -webkit-transition: opacity 400ms;
    -moz-transition:  opacity 0.2s ease;
    -o-transition:  opacity 0.2s ease;
    -ms-transition:  opacity 0.2s ease;
    transition: opacity 0.2s ease;   
}

.social li a:hover .ico {
    opacity: 1;
    filter: alpha(opacity=100);
}

HTML

<ul class="social">
         <li><a href="#">FACEBOOK<span class="ico"></span></a></li>
         <li><a href="#">TWITTER<span class="ico"></span></a></a></li>
         <li><a href="#">LINKEDIN<span class="ico"></span></a></a></li>
         <li><a href="#">YOUTUBE<span class="ico"></span></a></a></li>
</ul>

http://jsfiddle.net/G9M8L/1/

回答1:

the ul social is changing its width to acomodate the new width of the child that is increasing the margin. the children are going left because of this, but then the margin of the child is recalculated and they go back to the correct position.

just make this width fixed:

.social {
    list-style: none;
    float: right;
    text-align: right;
    position: relative;
    top: 15px;
    width: 121px;
}

回答2:

You can float: right the links themselves to solve the problem.

.social li a {
   float: right;
   /* the rest of the styles */
}

working demo

Also, there is no -ms-transition. IE10 supports transitions unprefixed, while IE9 does not support them at all.