我正在使用 CSS3 过渡根据鼠标悬停时的边距值为某些链接设置动画。它的动画符合预期,但 Chrome 中的动画不如其他浏览器(如 Firefox、IE10)流畅。
在 Chrome 中,当我将鼠标悬停在一个链接上时,所有其他链接都在轻微移动。请检查下面的链接。
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>
最佳答案
ul social 正在更改其宽度以适应增加边距的子项的新宽度。子项因此向左移动,但随后重新计算子项的边距并返回到正确的位置。
只要固定这个宽度即可:
.social {
list-style: none;
float: right;
text-align: right;
position: relative;
top: 15px;
width: 121px;
}
关于CSS3 过渡在 Chrome 中不平滑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14418359/