html - css 避免在悬停时滑动过渡

Question

如何避免悬停时社交图标中的滑动过渡？

我希望我所有的社交图标都在一个 png 文件中，并且也使用过渡，但它显示为滑动它而不是像两个不同的图像那样过渡

#social_icons {
  display:inline-block;
  background: url(http://www.gobothell.com/wp-content/uploads/2012/01/FB-and-Twitter-icons-300x181.jpg) no-repeat center center;
  background-position: 0px 0px;
  width: 150px;
  height: 175px;
  transition: 0.5s ease, forward;
  border: 1.5px solid blue;
  margin:10px;
}
#social_icons:hover {
  background: url(http://www.gobothell.com/wp-content/uploads/2012/01/FB-and-Twitter-icons-300x181.jpg) no-repeat center center;
  background-position: -150px 0px;
  width: 150px;
  height: 175px;
}
#social_icons2 {
  display:inline-block;
  background: url(http://www.florestrekkingtour.com/userfiles/images/FB_icons.png) no-repeat center center;
  width: 200px;
  height: 200px;
  transition: 0.5s ease, forward;
  border: 1.5px solid blue;
  margin:10px;
}
#social_icons2:hover {
  background: url(https://cdn3.iconfinder.com/data/icons/inside/PNG/256x256/icontexto-inside-facebook.png) no-repeat center center;
  background-position: 0px 0px;
  background-size: 200px 200px;
  width: 200px;
  height: 200px;
}
h2 {
  background:rgba(0, 0, 0, 0.7);
  color:yellow;
  text-align:center;
  text-shadow:0px 0px 10px lime;
  margin-top:45%;
}

1 image
<div id="social_icons"><h2>Hover me</h2></div>
2 images
<div id="social_icons2"><h2>Hover me</h2></div>

Answer 1

这对于单个元素的 CSS3 Transitions 是不可能的，您的 transitioning(changing) 属性是 background-position，因此它看起来是滑动的，

如果淡入/淡出效果是您所需要的，您可以使用 CSS3 动画在悬停时淡出元素，将其移动到所需的背景位置，然后淡入新图像。

如果您需要交叉淡入淡出，则可以使用 background-image: cross-fade()

background-image: cross-fade(url("logo-box.png"), url("logo-bare.png"),   50%);

但它对浏览器的支持非常有限，即 http://caniuse.com/#feat=css-cross-fade .

或者最好的选择可能是使用 2 个元素并在另一个元素之上淡出，您可以使用伪元素 (IE8+) 来伪造一个额外的元素，即

#social_icons:before {
   content:"";
   display:inline-block;
   position:absolute;
   opacity:0;
   background:   url(https://cdn3.iconfinder.com/data/icons/inside/PNG/256x256/icontexto-inside-     facebook.png) no-repeat center center;
   background-position: 0px 0px;
   background-size: 200px 200px;
   width: 200px;
   height: 200px;  
}

参见 http://jsfiddle.net/sjmcpherso/kr7ec28q/工作示例