Css PNG精灵悬停闪烁

我正在尝试为这张图像设置适当的动画，以便进行悬停进出。 我90%的时间都在那里。不知什么原因，如果你快速地来回悬停，你可以看到精灵在背景中移动

有没有解决方法或更好的方法

谢谢

.wrapper{
宽度：600px；
高度：600px；
溢出：隐藏；
利润率：20px；
}
.西瓜{
宽度：600px；
高度：600px；
背景：url(http://www.elevux.org/watermelon/watermelon-sprite.png)左上；
过渡：背景。5s步骤（23，结束）；
显示：块
}
.西瓜：悬停{
背景位置：-13800px顶部；
光标：指针
}

---

您应该将过渡移动到悬停选择器上，因为这是您希望动画发生的时间

---

嘿，似乎，这是可行的，但它删除了动画，这是一个很酷的部分！好的，下面的编辑怎么样？唯一的“缺点”是页面加载上的动画（可以使用javascript来否定），但我认为它可以吸引与元素的交互。

.wrapper {
  width: 600px;
  height: 600px;
  overflow: hidden;
  margin: 20px;
}

.watermelon {
  width: 600px;
  height: 600px;
  background: url(http://www.elevux.org/watermelon/watermelon-sprite.png) left top;
  display: block;
}

.watermelon:hover {
  background-position: -13800px top;
  cursor: pointer;
  transition: background .5s steps(23, end);
}