PNG Sprite hover мерцание

Question

Я пытаюсь анимировать изображение правильно для зависания. У меня есть 90% пути. Если вы быстро и быстро наводите указатель мыши, вы можете видеть, как спрайт перемещается в фоновом режиме

Есть ли исправление или лучший способ сделать это?

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

Спасибо !!!

.wrapper { 
 
\t width:600px; 
 
\t height:600px; 
 
\t overflow:hidden; 
 
\t margin:20px; 
 
} 
 
\t 
 
.watermelon { 
 
\t width:600px; 
 
\t height:600px; 
 
\t background:url(http://www.elevux.org/watermelon/watermelon-sprite.png) left top; 
 
transition:background .5s steps(23, end); 
 
display:block 
 

 
} 
 

 

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

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