Html css3背景位置改变而不翻滚？

有没有一种方法可以将背景图像与CSS3变换交叉淡入淡出

基本上需要完全一样的“推特悬停”在这个视频

例如：不透明度

0.5

到

1

像那样

我是CSS3的新手：（

HTML和CSS

<div id="social-contacts">
    <ul>
        <li id="fb"><a href=""></a></li>
    </ul>
</div>​


#social-contacts{
    width: 375px;
    float: left;
    margin-left: 50px;
    margin-top: 100px;
}
#social-contacts li{
    float: left;
    list-style: none;
}
#social-contacts li a{
    display: block;
}
#fb a{
    background: url("http://athimannil.com/page/images/social-icons.png") 0 0;
    width: 45px;
    height: 45px;

    opacity: 0.8;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s;
}
#fb a:hover{
    background-position: 0 47px;
    opacity: 1;
}​

​
#社会交往{
宽度：375px；
浮动：左；
左边距：50像素；
边缘顶部：100px；
}
#社会交往李{
浮动：左；
列表样式：无；
}
#社会交往{
显示：块；
}
#FBA{
背景：url（“http://athimannil.com/page/images/social-icons.png") 0 0;
宽度：45px；
高度：45px；
不透明度：0.8；
-webkit过渡：所有0.5s；
-moz转换：所有0.5s；
-o型过渡：均为0.5s；
-ms转换：所有0.5s；
过渡：均为0.5s；
}
#答：悬停{
背景位置：0 47px；
不透明度：1；
}​

---

演示：-

你是说像这样吗？我使用

@关键帧制作了它，它将在不翻滚的情况下为元素设置动画


你的一个例子

无限活力

HTML

文章
如果我理解你的意思是正确的，你只想转换不透明属性，而不是产生向下滚动效果的背景属性？为此，我们需要指定应该转换的属性

在本例中，您已指定过渡效果应应用于
所有
属性，即
背景位置：0 47px；
和
不透明度：1；

因此，您只需将
转换：全部0.5s；
更改为
转换：不透明度0.5s；

这里有一个

希望这有帮助！
你说的“无滚动”是什么意思？你想让图像自动更改，而用户不做任何事情吗？@JulesMazur我想在这段视频中使用“twitter hover”，首先感谢你的帮助：）。有点像第一个演示。我需要将视频中的第一个图像更改为第二个图像，如“twitter”
<img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" />

img {
   animation:animate_logo 5s;
   -moz-animation:animate_logo 5s; /* Firefox */
   -webkit-animation:animate_logo 5s; /* Safari and Chrome */
   -o-animation:animate_logo 5s; /* Opera */
}

@keyframes animate_logo {
   from {opacity: .5;}
   to {opacity: 1;}
}

@-moz-keyframes animate_logo /* Firefox */ {
   from {opacity: .5;}
   to {opacity: 1;}
}

@-webkit-keyframes animate_logo /* Safari and Chrome */ {
   from {opacity: .5;}
   to {opacity: 1;}
}

@-o-keyframes animate_logo /* Opera */ {
   from {opacity: .5;}
   to {opacity: 1;}
}