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