CSS Sprite 淡入淡出动画答案

【问题标题】：CSS Sprite fade animationCSS Sprite 淡入淡出动画
【发布时间】：2015-01-17 21:09:02
【问题描述】：

我基本上需要使精灵元素具有淡入淡出动画而不是滚动效果（不透明动画而不是背景位置）。我怎么能用css3或js做到这一点，但没有jquery？有没有办法不使用像素，而是使用 % 或 rems （在下面的代码中）来定位元素？

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

这里是小提琴：http://jsfiddle.net/zvj89o0o/1/

【问题讨论】：

标签： css css-transitions fadein css-animations sprite

【解决方案1】：

背景位置：x% y%;

实际上，百分比背景位置是这样的：

当横坐标为0%时，图像的左侧对齐容器的左侧。
当abscissa为100%时，图片右侧与容器右侧对齐。
中间值是线性计算的。

同样，

当纵坐标为0%时，图像的顶部对齐容器的顶部。
纵坐标为100%时，图片底边与容器底边对齐。
中间值是线性计算的。

你的问题

在您的问题中，精灵容器的横坐标可能有 3 个理想值：0%、50% 和 100%，并且可能有 4 个理想值表示纵坐标：0%、33.33%、66.66% 和 100%。见下图：

为了添加淡入淡出效果，在普通元素上方添加一个伪元素:before。现在，相应地定位背景并添加悬停效果以进行褪色。

更新片段：

body {
  background: #141414;
}
.sprites {
  position: relative;
  display: block;
}
a {
  display: inline-block;
  margin-top: 6px;
}
.youtube,
.pinterest,
.vk,
.facebook,
.twitter,
.instagram {
  width: 125px;
  height: 125px;
  background: url(http://i.imgur.com/xGT3jFF.png) 0 0 no-repeat;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
  float: left;
  display: block;
  margin-right: 5px;
}
.youtube:before,
.pinterest:before,
.vk:before,
.facebook:before,
.twitter:before,
.instagram:before {
  position: absolute;
  width: 125px;
  height: 125px;
  content: "";
  background: url(http://i.imgur.com/xGT3jFF.png) 0 0 no-repeat;
  transition: 0.5s ease;
}
.youtube {
  background-position: 100% 100%;
}
.youtube:before {
  background-position: 100% 66.6666%;
}
.youtube:hover:before {
  transition: 0.5s ease;
  opacity: 0;
}
.pinterest {
  background-position: 50% 100%;
}
.pinterest:before {
  background-position: 50% 66.6666%;
}
.pinterest:hover:before {
  transition: 0.5s ease;
  opacity: 0;
}
.vk {
  background-position: 0% 100%;
}
.vk:before {
  background-position: 0px 66.6666%;
}
.vk:hover:before {
  transition: 0.5s ease;
  opacity: 0;
}
.facebook {
  background-position: 100% 33.333%;
}
.facebook:before {
  background-position: 100% 0%;
}
.facebook:hover:before {
  transition: 0.5s ease;
  opacity: 0;
}
.twitter {
  background-position: 50% 33.3333%;
}
.twitter:before {
  background-position: 50% 0%;
}
.twitter:hover:before {
  transition: 0.5s ease;
  opacity: 0;
}
.instagram {
  background-position: 0% 33.33333%;
}
.instagram:before {
  background-position: 0% 0%;
}
.instagram:hover:before {
  transition: 0.5s ease;
  opacity: 0;
}

<div class="sprites">
  <a class="instagram" href="http://instagram.com"></a>
  <a class="twitter" href="https://twitter.com"></a>
  <a class="facebook" href="https://fb.com"></a>
  <a class="vk" href="https://vk.com"></a>
  <a class="pinterest" href="https://pinterest.com"></a>
  <a class="youtube" href="https://youtube.com"></a>
</div>

【讨论】：

【解决方案2】：

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

注意我添加的新属性

【讨论】：

嗯，动画不好看）其实这是一个问题，让它正常淡出而不跳层