CODEWITHSUNDEEP
cssanimationcss-transitions
Body
Body

Reputation: 3688

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/

Upvotes: 4

Views: 7155

Answers (2)

Ana
Ana

Reputation: 37178

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.

Upvotes: 3

vals
vals

Reputation: 64254

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;
}

Upvotes: 3

Related Questions