PNG Sprite悬停闪烁

Question

我正在尝试正确制作此图像的动画以进行悬停。 我有90％的方式。如果你快速进出，你可以看到精灵在后台移动

是否有修复或更好的方法来执行此操作？

http://www.elevux.org/watermelon/

感谢!!!

.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;
transition:background .5s steps(23, end);
display:block

}


.watermelon:hover {
	background-position:-13800px top;
	cursor:pointer
	
}

<div class="wrapper">
<div class="watermelon"></div>
</div>

Answer 1

您应该将过渡移动到悬停选择器上，就像您希望动画发生一样。

https://jsfiddle.net/gzk3mcyr/

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