Makaak

I have a very simple question and made a codepen to demonstrate. I have a timeline with 2 tweens. First changes autoAlpha to 1 and has infinite repeat, second one moves y: 150 down. My timeline doesn't jump to the second tween since first one has repeat: -1. How can i make it jump down to next tween while keeping the infinite repeat running? http://codepen.io/anon/pen/NpYowo

Thanks! it worked! What is happening here? An invisible wall pushing from both sides? Like with margin: 0 auto; , because the effect of the flex center gets removed when an element gets animated?

I'm trying to make a line appear my text which starts from width: 0 and expands to the width of the text. The way it works currently is it starts from the left (width: 0) and expands all the way to the right (width: 100%). The way i want it to work is: It starts from the center and expands to the left and to the right until it reaches width of text. How can you do this?