Chrome中的CSS3转换不顺畅 [英] CSS3 transition not smooth in Chrome

问题描述

我使用CSS3过渡来动画一些链接，基于鼠标悬停的边距值。它的动画如预期，但在Chrome中的动画不像在其他浏览器，如Firefox，IE10平滑。

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.

在Chrome中，当我将鼠标悬停在某个链接上时，所有其他链接都会稍微移动。请检查下面的链接。

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/

推荐答案

ul社会正在改变宽度以适应增加边缘的子的新宽度。孩子们因为这个而离开，但是孩子的边缘被重新计算并且他们回到正确的位置。

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.

只是把这个宽度固定： p>

just make this width fixed:

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

这篇关于Chrome中的CSS3转换不顺畅的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！