А если задачу надо усложнить. Как сделать что б через установленный промежуток времени к каждому блоку добавлялся класс с анимацией, причем пока эта анимация не проиграется для этого блока дальше цикл не идет ?

window.onload = function () {

		var $elem = $('#bigBlock div');
		var len = $('#bigBlock div').length;
		var i = 0;

		
		for (i = 0; i < len; i++){
				(function(i) {

						var el = $elem[i];
						var width = el.scrollWidth,
						      height = el.scrollHeight;

						setTimeout(function() {
*!*
						  el.addClass('animated flip'); // не работает  
*/!*

								el.style.width = height+'px';
								el.style.height = width+'px';

						}, 1000*i);
				}) (i);
		}

что не работает?
выкиньте цикл и запускайте следущую "анимацию" по окончанию предыдущей. гуглить transitionend

Цикл здесь очень необходим.
Я наверное как-то криво изъясняюсь. Попробую объяснить все пошагово.
1)Есть большое поле с дивами(у каждого свои размеры и каждый занимает свою позицию в пространстве + каждый див имеет класс picture1);
2)Ждем 2сек (- это время первой задержки, во время нее ничего не происходит)
3) Первому диву данного блока прискаевается классы с анимацией .toggleClass('animated flip') ( время анимации я задаю через CSS свойства, допустим 1,5сек) + класс picture1 заменяется picture2 только у этого дива
4) Первый див меняет свои размеры (высота=ширине, ширина=высоте)
5) Первый (уже измененный) див меняет свое положение в пространстве.

#bigBlock .picture2:nth-child(1) {
		top: 36%;
		left: 57%;		
}

6) С первого класса удаляются классы анимации .toggleClass('animated flip')
7) пункты 3-6 проделываются по очереди с каждым дивом до i<$('#bigBlock div').length;
8) Все дивы заняли новые позиции, и у них всех есть класс picture2 . Ждем 2сек.
9)Идет повтор от 3 - 6 для каждого дива .
10) Все дивы заняли новые позиции, и у них всех есть класс picture3 . Ждем 2сек.
11) Цикл продолжается пока не доходит picture N
12) Цикл идет с picture N в picture 1:)

Black_Star,
пока к пост №13 добавить нечего ...