html - 悬停效果 buggy

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