Добавьте секунду к каждой итерации задержки анимации

Question

Я использую этот скрипт для анимации div с использованием CSS.Он проходит через список из 24 делителей и применяет класс анимации к тем, которые выходят за пределы их контейнера.

JSFiddle

Я хочу сделать так, чтобы былзадержка между анимированными элементами div с использованием css ('animation-delay').

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

 $(function() {
    $('span.beer-info').each(function(i) {
        var element = $(this)
                        .clone()
                        .css({display: 'inline', width: 'auto', visibility: 'hidden'})
                        .appendTo('body');

        if( element.width() > $(this).width() ) {
            $(this).addClass( "mover-1" );
            $(this).css('animation-duration', ($(this).width() / element.width() * 1) + 's' + ' !important');
        }

        element.remove();
    });
});

Я нашел этот , который очень похож на, если не совсем то, что я ищу:

@for $i from 1 through 12 {
  .yourclass:nth-child(#{$i}) {
    animation-delay: $i * 0.5;
  }
}

Но я могуНе могу понять, как вставить это в мой код, не получая ошибок.

Другое решение здесь , но, опять же, я не знаю, как правильно интегрировать это.

$('ul li').each(function(i){
    var t = $(this);
    setTimeout(function(){ t.addClass('animation'); }, (i+1) * 50);
});

Любое руководство будет высоко ценится.