悬停时的过渡按钮

Question

我有这个2048x512图像，有4个阶段的过渡，但我无法弄清楚如何让它工作。

我知道如何将鼠标悬停在最后一个阶段，但是如何添加transition效果呢？

#instagram {
    width: 512px; height: 512px;
    background: url('/host/instagram.png') no-repeat left top;
}
#instagram:hover { background-position: -1542px 0px }

Answer 1

您并不需要为此特定示例进行转换，因为所有帧都是同一颜色托盘（白色，灰色，黑色）的一部分。使用具有transition属性的某些基于字体的图标（即：font-awesome）并在hover上更改其颜色，您可以实现类似（不同，但对于短时间不同）效果：{ {3}}

<强> HTML：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
...   
... 
<div class="icon-circle">
  <i class="fa fa-instagram"></i>
</div>

<强> CSS：

.icon-circle {
  position: relative;
  border-radius: 50%;
  width: 512px;
  height: 512px;
  border: 2rem solid black;
  transition: all .8s linear;
}
.icon-circle:hover {
  background-color: black;
  color: white;
}
.fa-instagram {
  font-size: 20rem;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

但是，如果您确实想要使用图像，对于精灵图像，您可以使用带有animation属性的CSS steps()来执行此操作：jsfiddle

<强> HTML：

<div id="instagram"></div>

<强> CSS：

#instagram {
  width: 512px; height: 512px;
  background: url('http://andreimartalog.com/host/instagram.png') no-repeat;
}
#instagram:hover { animation: enter 0.3s steps(3) forwards; }
@keyframes enter { 100% { background-position: -1536px } }