Sass: How does background-position works in a hover effect with over sized background size

Question

I am learning to use background-position property in combination with background-size property to create a cool effect. When you hove on an item, white band is animated moving from right to left.

You can see the effect here: https://codepen.io/logan-lee/pen/YzPjLpj?editors=1100

I'm trying to understand how it works. Notice that inside &__link, background-size is set to 220%. And when it is hovered, background-position of it is set to 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>

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);
        }
    }
}

This works very well. But I'm wondering how does it behave with different background-position values.

I have drawn a picture to try to illustrate what is going on.

Please open the image in a new tab in your browser.

When hovered on an item:

As you can see at the default position which is 0%, background of an item is orange red.

At 100% you can see transparent background (which is drawn in the picture as blue).

As you decrease background position from 100% to say 90%, steadily orange red adds in size from left to right.

When background position is at 50%, you can see equal proportion of red and transparent background.

When background position is further decreased to say, 10%, you can see most of the background is orange red(left to right) and the rest space is transparent.

I don't understand how this background position works. I think I understand when its set to 0% or 50% or 100% but not in between. Thanks in advance.