Delay opening of page

[ghost]

I am trying to use djax combined with css3 to animate a page load and transition. I have used the following function to add classes to all the elements I want for the transition:

function pageTransition(direction) {
direction = direction == "in" ? direction : "out";
$('div, img').each(function () {
var $item = $(this);
setTimeout(function () {
$item.addClass('slide-' + direction)
}, 80 * Math.floor((Math.random() * 5) + 1));
});
}

Then I have a css keyframe animation for the entrance and exit transition. The intro works perfect but the exit doesn't. I call the exit to run in the following way:

$(window).bind('djaxClick', function (e, data) {
// Transition content out
pageTransition('out');
});

It all works fine as in the transition works but the problem I have is the function is called, the css animation starts but the next page opens before the css animation can complete or even start. I have tried everything I can think of but I just can't get this to work.

If anyone can think of anything or point me in the right direction I would greatly appreciate it!!!

Thanks in advance!