CSS background-size and background-position

Question

  background: linear-gradient(to right, green 0%, green 33.3%, blue 33.3%, blue 66.7%, white 66.7%, white 100%);
  background-size: 300%;
  background-position: 50%;

  transition: left, background-position 0.5s;

I want to transition between 3 different colors but I can't understand how this works. By changing background-position to 0% displays green, 50% displays blue and 100% displays white.

With my knowledge, because viewport is 100%, setting background-position to 50% should either show little bit of blue and rest as white(50% of 300% = 150% point) or most as green and little bit of blue(absolute position of 50% in total 300%).

How is this happening?