Delay transform3d but not loop

Question

I have a javascript loop that executes a transform3d animation. Everything is working great, but I wanted to see if I can add a delay to certain executions inside the loop (4 items total).

for (i=0,len=$clientsSections.length;i<len;i++) {
    clientsSection = $clientsSections[i];

    if (i == 0 || i == 3) {
        finalTransitionTime = '600ms';
    }
    else if (i == 1 || i == 2) {
        finalTransitionTime = '300ms';
    }

    clientsSection.style.webkitTransition = 'all ' + finalTransitionTime + ' linear';
    clientsSection.style.OTransition = 'all ' + finalTransitionTime + ' linear';
    clientsSection.style.msTransition = 'all ' + finalTransitionTime + ' linear';
    clientsSection.style.MozTransition = 'all ' + finalTransitionTime + ' linear';
    clientsSection.style.transition = 'all ' + finalTransitionTime + ' linear';

    clientsSection.style.webkitTransform = 'translate3d(0,0,0)';
    clientsSection.style.transform = 'translate3d(0,0,0)';
    clientsSection.style.OTransform = 'translate3d(0,0,0)';
    clientsSection.style.msTransform = 'translate3d(0,0,0)';
    clientsSection.style.MozTransform = 'translate3d(0,0,0)';
}

What I want to do is run i == 0 and i == 3 immediately, but delay i == 1 and i == 2 by a couple hundred milliseconds. I am trying to figure out how to accomplish this, but I am struggling to make it happen with the for loop running 0,1,2,3.

Answer 1

CSS3 has a transition-delay property that may be what you want.

https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay

Ex: transition-delay: 200ms;

The transition property also supports a delay.

http://css-tricks.com/almanac/properties/t/transition/

Ex: transition: color 300ms 200ms; (delays for 200ms, then runs the animation for 300ms)