Hover эффект багги

Question

Я очень плохо объяснения, но вот GIF, как он выглядит, когда колебались:

мне нужно стрелку прийти слева только, когда парил (не так, как в gif). Вы получите то, что я имею в виду, когда вы смотрите на gif.

Вот мой CSS:

.nav-background .nav-content .nav-li { 
    list-style: none; 
    font-family: "Lato Black", sans-serif; 
    text-align: left; 
    font-size: 3rem; 
    line-height: 1.5em; 
    letter-spacing: 5px; 
    text-transform: uppercase; 
} 

.nav-background .nav-content .nav-li a { 
    color: #FFF; 
    text-decoration: none; 
    -webkit-transition-duration: .3s; 
} 


.nav-background .nav-content .nav-li a:hover { 
    background: url("../img/arrow-right-white.png") no-repeat left; 
    background-size: 50px; 
    padding-left: 50px; 
} 

Если кто-то может помочь, я это очень ценю! :)

Answer 1

У вас есть эта проблема, потому что вы используете переход для всех свойств. Попробуйте использовать переход только для фона положение:

-webkit-transition:background-position 1s ease-in; 
-moz-transition:background-position 1s ease-in; 
-o-transition:background-position 1s ease-in; 
transition:background-position 1s ease-in; 

fiddle