Javascript 悬停时的转换按钮

我有这张2048x512图像，它有4个过渡阶段，但我不知道如何使它工作。

我知道当我把鼠标悬停在它上面时，如何使它变为最后一个阶段，但是我如何给它添加

转换
效果呢

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

对于这个特定的示例，您实际上不需要转换，因为所有帧都是相同颜色托盘（白色、灰色、黑色）的一部分。使用一些基于字体的图标（例如：font-awesome）和
transition
属性，并在
悬停
上更改它们的颜色，可以实现类似的效果（不完全相同，但在短时间内差别不大）：

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>

.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%;
}

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

#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 } }

但是，如果确实要使用图像，则对于精灵图像，可以使用CSS
动画
和
步骤（）
属性：

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>

.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%;
}

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

#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 } }

我不完全理解您的问题，您还添加了jquery标记。您是在CSS还是Jquery中这样做的？在您的例子中，您是否可以只对背景颜色进行转换，因为背景图像不是标准的可设置动画的属性（尽管Chrome、Opera和Safari都支持）。无论如何，jquery插件可能对你有帮助。你想要什么样的转换？您可以添加
过渡：背景位置.2s
，但我不确定这是否是您想要的。您看到instagram按钮在按钮处如何过渡了吗？这就是我想要实现的目标：