Chrome中的Jerky变换过渡
Chrome中的Jerky变换过渡
提问于 2013-03-25 08:09:20
我正在对背景图像使用CSS3变换来放大悬停。
我已经在最新的Opera、Safari和Firefox浏览器上测试过了，运行起来很流畅，但在Chrome上的过渡非常不稳定。
这里是链接，将鼠标悬停在社交图标上，以了解我的意思。http://www.media-flare.com/pins/ -我注意到，当你将浏览器调整到移动视图时，情况会变得更糟。
我在这里做了一个jsfiddle版本，并放慢了转换速度，因为它更难看到。
http://jsfiddle.net/wsgfz/1/ -这在chrome和火狐中看起来像肉干，在safari和opera中看起来很流畅。
我能做些什么让过渡更顺畅些吗？
如果您不能查看jsfiddle，下面是代码
.social {
position: relative;
list-style:none;
}
.social > li > a {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
color: transparent;
}
.social > li > a {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
color: transparent;
}
.fbook, .twit, .tmblr, .pntrst, .insta {
background: url(http://placehold.it/350x150) center center;
width: 78px;
height: 90px;
background-size: cover;
float: left;
margin: 30px;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
transition: all 0.8s ease;
}
.fbook {background-position: 0 0}
.twit {background-position: -78px 0}
.tmblr {background-position: -156px 0}
.pntrst {background-position: -232px 0}
.insta {background-position: -310px 0}
.fbook:hover, .twit:hover, .tmblr:hover, .pntrst:hover, .insta:hover {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
transform: scale(1.5);
}<ul class="social">
<li><a href="" class="fbook">Facebook</a></li>
<li><a href="" class="twit">Twitter</a></li>
<li><a href="" class="tmblr">Tumbler</a></li>
<li><a href="" class="pntrst">Pinterest</a></li>
<li><a href="" class="insta">Instagram</a></li>
<li><a href="" class="rss">RSS</a></li>
</ul>
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-03-25 08:18:26
在Chrome中，转换似乎比转换更有效。试试这个：
.social {
position: relative;
list-style: none;
}
.social > li > a {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
color: transparent;
}
.social > li > a {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
color: transparent;
}
.fbook,
.twit,
.tmblr,
.pntrst,
.insta {
background: url(http://placehold.it/350x150) center center;
width: 78px;
height: 90px;
background-size: cover;
float: left;
margin: 30px;
-webkit-transform: translate(0px, 0);
-webkit-transition: -webkit-transform 0.8s ease;
-moz-transform: translate(0px, 0);
-moz-transition: -moz-transform 0.8s ease;
transform: translate(0px, 0);
transition: -webkit-transform 0.8s ease;
}
.fbook {
background-position: 0 0
}
.twit {
background-position: -78px 0
}
.tmblr {
background-position: -156px 0
}
.pntrst {
background-position: -232px 0
}
.insta {
background-position: -310px 0
}
.fbook:hover,
.twit:hover,
.tmblr:hover,
.pntrst:hover,
.insta:hover {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
transform: scale(1.5);
}<ul class="social">
<li><a href="" class="fbook">Facebook</a>
</li>
<li><a href="" class="twit">Twitter</a>
</li>
<li><a href="" class="tmblr">Tumbler</a>
</li>
<li><a href="" class="pntrst">Pinterest</a>
</li>
<li><a href="" class="insta">Instagram</a>
</li>
<li><a href="" class="rss">RSS</a>
</li>
</ul>
一次鼠标快速输入/输出的闪烁效果现在也应该消失了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15605731
复制相关文章
相似问题
腾讯云开发者
