PNGスプライトのホバーのフリッカー

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