CSS精灵淡入淡出动画

我基本上需要使精灵元素具有淡入淡出的动画而不是滚动效果（不透明度动画而不是背景位置）。如何使用css3或js，但不使用jquery？有没有一种方法可以不使用像素来定位元素，而是使用%或rems（在下面的代码中）

这是小提琴：

注意我添加的新属性

背景位置：x%y%； 实际上，百分比背景位置的工作原理如下：

• 当横坐标为

  0%

  时，图像的左侧与容器的左侧对齐
• 当横坐标为

  100%

  时，图像的右侧与容器的右侧对齐
• 中间值是线性计算的

同样地

• 当纵坐标为

  0%

  时，图像的顶面与容器的顶面对齐
• 当坐标为

  100%

  时，图像的底面将与容器的底部对齐
• 中间值是线性计算的

---

你的问题 在您的问题中，雪碧容器的横坐标可能有3个理想值：

0%

，

50%

，和

100%

，纵坐标可能有4个理想值：

0%

，

33.33%

，

66.66%

，和

100%

。请参见下图：

要添加淡入效果，请在正常元素上方的之前添加一个伪元素。现在，相应地定位背景，并为淡入添加悬停效果

更新的代码段：

正文{
背景：#141414；
}
.雪碧{
位置：相对位置；
显示：块；
}
a{
显示：内联块；
边缘顶部：6px；
}
.youtube，
pinterest先生，
.vk，
.facebook，
啁啾
.instagram{
宽度：125px；
高度：125px；
背景：url(http://i.imgur.com/xGT3jFF.png)0 0不重复；
-webkit过渡：所有300毫秒的易入易出；
-moz转换：所有300毫秒的输入输出都很容易；
过渡：所有300毫秒的缓进缓出；
浮动：左；
显示：块；
右边距：5px；
}
.youtube：之前，
品特蕾斯特：以前，
.vk:以前，
.脸谱网：之前，
.推特：之前，
.instagram：之前{
位置：绝对位置；
宽度：125px；
高度：125px；
内容：“；
背景：url(http://i.imgur.com/xGT3jFF.png)0 0不重复；
过渡：0.5s缓解；
}
.youtube{
背景位置：100%100%；
}
.youtube:以前{
背景位置：100%66.6666%；
}
.youtube:悬停：之前{
过渡：0.5s缓解；
不透明度：0；
}
平特瑞斯特先生{
背景位置：50%100%；
}
品特蕾斯特：以前{
背景位置：50%66.6666%；
}
.pinterest:悬停：之前{
过渡：0.5s缓解；
不透明度：0；
}
.vk{
背景位置：0%100%；
}
维克：以前{
背景位置：0px 66.6666%；
}
.vk:悬停：在{
过渡：0.5s缓解；
不透明度：0；
}
.脸谱网{
背景位置：100%33.333%；
}
.脸书：以前{
背景位置：100%0%；
}
.facebook:hover:before{
过渡：0.5s缓解；
不透明度：0；
}
.推特{
背景位置：50%33.3333%；
}
.推特：以前{
背景位置：50%0%；
}
.twitter:hover:before{
过渡：0.5s缓解；
不透明度：0；
}
.instagram{
背景位置：0%33.33333%；
}
.instagram：之前{
背景位置：0%0%；
}
.instagram:悬停：之前{
过渡：0.5s缓解；
不透明度：0；
}

---

嗯，动画看起来不太好）实际上，要使其正常淡入而不在层间跳跃是一个问题

.youtube {
    background-position: -256px -256px;
    &:hover {
        background-position: -256px -384px;
    }
}

.youtube {
    background-position: -256px -256px;
    transition-property:opacity;
    transition-duration:0.5s;
    opacity:1;
    &:hover {
        background-position: -256px -384px;
        opacity:0.5;
    }
}