CSS 精灵淡入淡出动画

Question

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

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

这是fiddle：http://jsfiddle.net/zvj89o0o/1/

Answer 1

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

注意我添加的新属性

Answer 2

background-position: x% y%;

实际上，百分比 background-position 是这样工作的：

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

同样，

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

你的问题

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

要添加淡化效果，在普通元素上方添加pseudo-element :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>

CSS 精灵淡入淡出动画

CSS Sprite fade animation

css

sprite

fadein

css-transitions

css-animations

background-position: x% y%;

你的问题

更新的代码段：