<div class="box orange"></div>
<div class="box grey"></div>
<div class="box green"></div>
<div class="box pink"></div>.box{
width:48px;
height: 48px;
border-radius: 10px;
margin: 10px;
}
.orange{
background: orange;
}
.grey{
background: grey;
}
.green{
background: green;
}
.pink{
background: pink;
}//create a TimelineMax and make it repeat 3 times with 1 second between iterations
var tl = new TimelineMax({repeat:10, repeatDelay:1});
tl.to(".green", 1, {x:200})
//start 1 second after previous tween ends (gap)
.to(".orange", 1, {x:200, scale:0.2}, "+=1")
//add a label at the end
.addLabel("greyAndPink")
//start both of these animations at the same time, at the "greyAndPink" label.
.to(".grey", 1, {x:200, scale:2, y:20}, "greyAndPink")
.to(".pink", 1, {x:200, rotation:360}, "greyAndPink"); 
External CSS
This Pen doesn't use any external CSS resources.