Высота усадочного элемента с задержкой

Я хотел бы, чтобы 2 заголовка затухали и выходили, а затем я хотел бы, чтобы обертывание элементов уменьшалось по высоте.

Проблема, с которой я сталкиваюсь, заключается в том, что она не оживляет, она просто внезапно "сжимается". Должен ли я использовать анимацию css?

Ссылка на скрипку: http://jsfiddle.net/danieljoseph/37eAC/2/

JQuery

$('.section-intro h1').delay(1000).fadeIn(1000).delay(2000).fadeOut(1000);
$('.section-intro h2').delay(5000).fadeIn(1000).delay(2000).fadeOut(1000);
$('.section-intro div').delay(9000).fadeIn(1000);
setTimeout(function(){
   $(".section-intro").addClass("animate");
}, 12000);