css3 – Chrome中的Jerky CSS变换转换

我在背景图像上使用 CSS3变换来放大鼠标.

我已经在Opera,Safari和Firefox的最新浏览器中进行了测试,并且工作流畅,然而在Chrome中,这种转换是非常干的.

他们是链接,悬停在社交图标上,看看我的意思.http://www.media-flare.com/pins/ – 我注意到,当你将浏览器调整到移动视图,它变得更糟.

我在这里做了一个jsfiddle版本,减慢了转换,因为它很难看到.

http://jsfiddle.net/wsgfz/1/ – 这在Chrome和firefox看起来很厉害,游客和歌剧都很流畅.

有什么可以做的,使过渡更顺利吗？

这是代码,如果你不能查看jsfiddle

HTML

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

CSS

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

解决方法

转换似乎比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,.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: -webkit-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,.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>

一个快速鼠标输入/输出的闪烁效应现在也应该消失.

原文地址：https://www.jb51.cc/css/216576.html