Как поставить анимацию в CSS3, когда она отображается после прокрутки страницы (предоставляется JSFiddle)

JSFIDDLE: http://jsfiddle.net/mh7e8/1/

У меня есть 3 изображения. Я хочу добавить класс .animation чтобы они отображались с отскоком:

<div class="row">
  <div class="col-sm-4 steps">
  <img src="./s3/img/sprite-circle-1.png" class="step-1 bounceIn">
  </div>

  <div class="col-sm-4 steps">
  <img src="./s3/img/sprite-circle-2.png" class="step-2 bounceIn">
  </div>

  <div class="col-sm-4 steps">
  <img src="./s3/img/sprite-circle-3.png" class="step-3 bounceIn">
  </div>
</div>

У меня уже есть очень приятная (рабочая) анимация CSS3:

.animated.bounceIn{
// code: see JSFIDDLE - http://jsfiddle.net/mh7e8/1/ for detail
}

Я хочу, чтобы класс применялся к каждому изображению с 1-секундной задержкой между ними, когда первое изображение загружается на экран.

У меня есть код, чтобы определить, когда элемент виден (работает):

(function ($) {

    $.fn.isVisible = function (partial, hidden, direction) {

 // working code: see JSFIDDLE - http://jsfiddle.net/mh7e8/1/ for detail


})(jQuery);
$(function () {

    var $bounceIn = $('.step-1');
    var testVis = function () {
        $bounceIn.each(function () {
            if ($(this).isVisible()) {
                console.log("step-1 visible");
            }

});
};

$(window).on('scroll resize', testVis);
testVis();
});

Там, где я боюсь, нужно найти, как последовательно откладывать каждую анимацию. Применение задержки к переходу CSS, похоже, не вызывает последовательного поведения по сравнению с браузерами (например, шаг 2 может загрузить до шага 1). Как я могу поставить очередь в jQuery?