Варианта два:
1) Добавлять ко всем блокам классы одновременно, и ставить для каждого класса свою задержку на transition. Пример:
.block-1.active {transition: height %time%;}
.block-2.active {transition: height %time% 500;}
.block-3.active {transition: height %time% 900;}
.block-4.active {transition: height %time% 1200;}
/* как вариант, transition: %property% %time% можно задать для всех одно, а по отдельности менять только свойство transition-delay, если вам так удобнее будет */
Если вам при снятии класса требуется, чтобы анимация всех блоков произошла одновременно, то для их общего класса (ну или для каждого по отдельности) пишите просто что-нибудь такое:
.block {transition: height %time% 0;}
В итоге если класс active у блока есть, его анимация стартует с задержкой (первая после свойства это время исполнения, а вторая это задержка). Если класса .active нету, то и задержки не будет.
2) Второй вариант предполагает использование setTimeout(){function() {%действие%}, %delay%) для каждого действия с делеем. Если положить таймаут внутрь другого, то его время сложится с родителем (то есть его таймаут стартнет только когда "выстрелит" таймаут родителя).
Ну и для цикличности все это дело надо просто упаковать в setInterval.
