Sass 背景位置是如何在背景尺寸过大的悬停效果中工作的

我正在学习将“背景位置”属性与“背景大小”属性结合使用，以创建一种很酷的效果。当您在某个项目上移动时，白色条带将从右向左移动

您可以在此处看到效果：

我正在努力理解它是如何工作的。请注意，在&_链接中，背景大小设置为220%。当它悬停时，它的背景位置设置为100%

<nav class="navigation__nav">
  <ul class="navigation__list">
    <li class="navigation__item"><a href="#" class="navigation__link"><span>01</span>About Natous</a></li>
    <li class="navigation__item"><a href="#" class="navigation__link"><span>02</span>Your benfits</a></li>
    <li class="navigation__item"><a href="#" class="navigation__link"><span>03</span>Popular tours</a></li>
    <li class="navigation__item"><a href="#" class="navigation__link"><span>04</span>Stories</a></li>
    <li class="navigation__item"><a href="#" class="navigation__link"><span>05</span>Book now</a></li>
  </ul>
</nav>

这很有效。但我想知道它在不同的背景位置值下是如何工作的

我画了一幅画，试图说明正在发生的事情

请在浏览器的新选项卡中打开图像

将鼠标悬停在项目上时：

正如您在默认位置0%处看到的，项目的背景为橙红色

在100%时，您可以看到透明背景（在图片中绘制为蓝色）

当你将背景位置从100%降低到90%时，橙色红色从左到右逐渐增大

当背景位置为50%时，可以看到相同比例的红色和透明背景

当背景位置进一步降低到10%时，您可以看到大部分背景是橙红色（从左到右），其余空间是透明的

我不明白这个背景职位是怎么工作的。我想我理解当它设置为0%、50%或100%时，但不在两者之间。提前谢谢

body
{
  font-size: 10px;
}

.navigation
{
  &__link {
        &:link,
        &:visited {
            display: inline-block;
            font-size: 3rem;
            font-weight: 300;
            padding: 1rem 2rem;
            color: #fff;
            text-decoration: none;
            text-transform: uppercase;
            background-image: linear-gradient(120deg, orangered 0%, orangered 50%, #fff 50%);
            background-size: 220%;
            transition: all .4s;

            span {
                margin-right: 1.5rem;
                display: inline-block;
            }
        }

        &:hover,
        &:active {
            background-position: 100%;    // try different values like 100%, 90%, 50%, 10%, 0%.
            color: green;
            transform: translateX(1rem);
        }
    }
}