从左下角到右上角悬停时的对角过渡背景色

Question

我在this question的答案中使用的是技术，只是我想知道是否可以从左向右滑动背景颜色变化[[对角线-特别是从左下角到顶部-对吧？

例如，我有此菜单的CSS和HTML：

.menu {
background: #1481C3;
color: white;
border-right: 1px solid #666666;
}

.menu ul.links {
list-style: none;
padding: 0;
}

.menu ul.links li {
border-bottom: 1px solid #0E99ED;
height: 64px;
line-height: 67px;
padding: 0 25px;
font-size: 15px;
background: linear-gradient(to right, #0E99ED 50%, #1481C3 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: all 0.2s ease;
}

.menu ul.links li:hover {
background-position: left bottom;
cursor: pointer;
}

<div class="menu">
      <ul class="links">
        <li class="home">
          <div id="home" class="menu-icon-container">
            <img class="menu-icon" src="/images/home-icon.png" />
          </div>
          <span>Home</span>
        </li>
        <li class="assignments">
          <div class="menu-icon-container">
            <img class="menu-icon" src="/images/assignments-icon.png" />
          </div>
          <span>Assignments</span>
        </li>
        <li class="proctoring">
          <div class="menu-icon-container">
            <img class="menu-icon" src="/images/proctoring-icon.png" />
          </div>
          <span>Proctoring</span>
        </li>
        <li class="reports">
          <div class="menu-icon-container">
            <img class="menu-icon" src="/images/reports-icon.png" />
          </div>
          <span>Reports</span>
        </li>
        <li class="administration">
          <div class="menu-icon-container">
            <img class="menu-icon" src="/images/administration-icon.png" />
          </div>
          <span>Administration</span>
        </li>
      </ul>
</div>

而且，为了使其成为[[水平，我试图更改此类的样式]
.menu ul.links li {
    background: linear-gradient(to top right, #0E99ED 50%, #1481C3 50%);
}

但是那不是按预期的方式运作：link to jsFiddle

我需要li最初是100％#0E99ED（浅蓝色），然后悬停在100％#1481C3（深蓝色）上。目前，^最初占据#0E99ED左下角的大约25％，仅占悬停时li总数的大约75％。初始时必须为0％，悬停时为100％。 
关于如何解决此问题的任何建议？ 

Answer 1

div {
  height: 100px;
  background-image: linear-gradient(45deg, blue 50%, lightblue 50%);
  background-size: 250% 100%;
  background-position: right bottom;
  transition: background-position .5s ease;
}

div:hover {
  background-position: left top;
}

<div></div>