如何在背景图像过渡中滑动？

Question

我有一个列表设置。我想要做的是当您将鼠标悬停在列表项上时，将显示以下背景图像。

我想要做的是添加一个效果，因为背景图像是一种渐变形式，我希望它从左向右滑动。

我没有太多运气在谷歌找到这方面的资源。

我目前的CSS是：

.menu-item {
  list-style: none;
  margin-bottom: 1.5em;
  padding-left: 2em;
  width: 100%;
  height: 35px;
  transition: all 0.2s ease-in;
}
.menu-item:hover {
  background: url(../img/menu-hover-bg.png) no-repeat left;
}
.menu-item a {
  padding-top: 0.5em;
  color: #ffffff;
  text-transform: uppercase;
  display: block;
}

我现在也提出了JSFiddle我所拥有的内容。

Answer 1

您可以像这样使用背景大小：

#sidebar {
  padding-top: 2em;
  padding-bottom: 2em;
  background: #21203d;
}

.menu-item {
  list-style: none;
  margin-bottom: 1.5em;
  padding-left: 2em;
  width: 100%;
  height: 35px;
  background-image: url(https://i.stack.imgur.com/jMwI7.png);
  background-repeat: no-repeat;
  background-position: left;
  background-size: 0 100%;
  transition: all 0.2s ease-in;
}

.menu-item:hover {
  background-size: 200px 100%;
}

.menu-item a {
  padding-top: 0.5em;
  color: white;
  text-transform: uppercase;
  display: block;
  text-decoration: none;
}

<div id="sidebar">
  <ul id="menu" class="main-menu">
    <li class="menu-item">
      <a href="/"><span class="hover-large"></span>Home</a>
    </li>
    <li class="menu-item">
      <a href="/"><span class="hover-large"></span>News</a>
    </li>
    <li class="menu-item">
      <a href="/"><span class="hover-large"></span>Our Team</a>
    </li>
    <li class="menu-item">
      <a href="/"><span class="hover-large"></span>Fixtures</a>
    </li>
  </ul>
</div>

您也可以在不使用图像的情况下轻松地重新创建此背景，并且可以使用更复杂的动画：

#sidebar {
  padding-top: 2em;
  padding-bottom: 2em;
  background: #21203d;
}

.menu-item {
  list-style: none;
  margin-bottom: 1.5em;
  padding-left: 2em;
  width: 100%;
  height: 35px;
  background-image: 
  linear-gradient(#f13c4a,#f13c4a),
  linear-gradient(to right,black,transparent);
  background-repeat: no-repeat;
  background-position: left;
  background-size:  5px 0%,0 100%;
  transition: all 0.2s ease-in;
}

.menu-item:hover {
  background-size: 4px 100%,200px 100%;
}

.menu-item a {
  padding-top: 0.5em;
  color: white;
  text-transform: uppercase;
  display: block;
  text-decoration: none;
}

<div id="sidebar">
  <ul id="menu" class="main-menu">
    <li class="menu-item">
      <a href="/"><span class="hover-large"></span>Home</a>
    </li>
    <li class="menu-item">
      <a href="/"><span class="hover-large"></span>News</a>
    </li>
    <li class="menu-item">
      <a href="/"><span class="hover-large"></span>Our Team</a>
    </li>
    <li class="menu-item">
      <a href="/"><span class="hover-large"></span>Fixtures</a>
    </li>
  </ul>
</div>

Answer 2

我已经在background-size属性上进行了转换，这似乎具有预期的效果：

.menu-item {
  background-size: 0% 100%;
  list-style: none;
  margin-bottom: 1.5em;
  padding-left: 2em;
  width: 100%;
  height: 35px;
  transition: all 0.2s ease-in;
}
.menu-item:hover {
  background: url(https://i.stack.imgur.com/jMwI7.png) no-repeat;
  background-size: 300px 100%;
}

请参阅此更新的小提琴：https://jsfiddle.net/t2v25ppz/22/