重复TweenMax时间线并重叠

Question

我正在尝试使一些元素在时间轴中彼此淡入淡出，重复10次。

我遇到的问题是在时间轴结束并开始新的动画时使动画重叠。在Codepen演示中，如何确保动画重叠，以便当正方形改变颜色时白色背景永远不可见？

谢谢。

var t2_blue 	= $("#t2_blue");
var t2_yellow = $("#t2_yellow");
var t2_pink 	= $("#t2_pink");		
var animateTextFade = new TimelineMax({repeat: -1});
animateTextFade
    .to(t2_pink, 0.5, {alpha: 1}, "-=0.3")
    .to(t2_pink, 0.5, {alpha: 0}, "+=0")
    .to(t2_yellow, 0.5, {alpha: 1}, "-=0.3")
    .to(t2_yellow, 0.5, {alpha: 0}, "+=0")
    .to(t2_blue, 0.5, {alpha: 1}, "-=0.3")
    .to(t2_blue, 0.5, {alpha: 0}, "+=0")
  ;

.img{
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
}	
#t2_blue, #t2_yellow, #t2_pink {
  width: 200px;
  height: 200px;
}
#t2_blue {
  background: blue;
}

#t2_yellow {
  background: yellow;
}

#t2_pink {
  background: pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="img" id="t2_blue" ></div>
<div class="img" id="t2_yellow" ></div>
<div class="img" id="t2_pink" ></div>