Flip Clock Макет анимации JQuery CSS

Question

Это моя скрипка: http://jsfiddle.net/trickitty/sw4k090f/1/.

current.addClass("before")
          .removeClass("active")
          .prev("li")
          .addClass("active")     
          .one('webkitAnimationEnd oanimationend msAnimationEnd animationend',
        function (e) {
            $(this).removeClass('before');
        });

Новый номер будет поступать из бэкэнда и должен будет поменять счетчик. Таким образом, есть две перевернутые буквы, по одной на каждую цифру числа. В каждом ul есть два li-s, один для старой цифры и один для новой. Новый загружается сзади, поэтому сначала мы его не увидим. Идея состоит в том, чтобы с помощью анимации переворачивания назад / новый li становился видимым, что я делаю с добавлением / удалением класса before, который изменяет z-индекс. Я не могу понять, как сделать это правильно, хотя. Может быть, я упускаю что-то фундаментальное здесь..

Оригинальный код написан на codepen, написанном ademilter, но я не могу использовать более двух ссылок на данный момент.

Я скопировал это здесь: http://jsfiddle.net/trickitty/a4mch0x2/ и флип не работает, я не знаю почему.

У меня вопрос: насколько неправильный мой код и почему скрипта не работает для исходного скопированного кода?