JS:遍历数组，在通知中依次显示每个项

我尝试遍历一个数组，在通知中依次显示每个项目:

1. 从底部向上滑动，带有CSS动画
2. 显示时延迟3秒
3. 滑动到底部与css动画
4. 下一项加载前的8秒间隔

同时，当鼠标停留在屏幕上时，通知应该保持在屏幕上，并且在鼠标离开时隐藏(经过第二次延迟)。

我有以下问题:

如何在css动画后创建3秒的延迟?
1. 我如何依次遍历项目?在下面的代码中，它们会同时执行。
2. 如何暂停和恢复动画?

https://jsfiddle.net/3905wogc/1/

    $(function() {
        var delay = 3000,
        interval = 8000,
        $el = $('#notification'),
        data = [{
            id: 1,
            content: 'First Notification'
        },
        {
            id: 2,
            content: 'Second Notification'
        },
        {
            id: 3,
            content: 'Third Notification'
        }];
        $.each(data, function (i, item) {
            console.log (item);
            // add the content to the html
            $el.html(item.content);
            $el.addClass('in');
            $el.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {
                // animate in complete
                console.log('in complete', i);
                // add delay before slide out
                $el.removeClass('in').addClass('out');
                $el.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {
                    // animate out complete
                    console.log('out complete', i);
                    // add interval before next slide in
                });
            });
        });
        $el.on('mouseover', function () {
            // pause the animation 
        });
        $el.on('mouseout', function () {
            // resume the animation 
        });
    });

var delay = 3000,
    interval = 8000 + delay,
    $el = $('#notification'),
    data = [{
        id: 1,
        content: 'First Notification'
    },
            {
                id: 2,
                content: 'Second Notification'
            },
            {
                id: 3,
                content: 'Third Notification'
            }],
    currentItem = 0 ,
    timeoutTrack ,
    intervalTrack;
showNextOne();
var intervalTrack = setInterval(function(){showNextOne();},interval);

function showNextOne()
{
    $el.html(data[currentItem].content).addClass("in");
    timeoutTrack = setTimeout(function()
    {
        $el.removeClass("in").addClass("out");
        setTimeout(function(){$el.removeClass("out");},1500);
    },delay);
    if(currentItem +1 >= data.length)
        currentItem = 0;
    else
        currentItem++;
}
$el.on("mouseenter",function()
{
    if(timeoutTrack)
        clearTimeout(timeoutTrack);
    if(intervalTrack)
        clearInterval(intervalTrack);
});
$el.on("mouseleave",function()
{
    timeoutTrack = setTimeout(function()
    {
        $el.removeClass("in").addClass("out");
        setTimeout(function(){$el.removeClass("out");},1500);
    },delay);
    intervalTrack = setInterval(function(){showNextOne();},interval);
});