Fade дочерний элемент немного после родителя

Question

У меня есть ползунок div с надписью/span overlay. Я хотел бы, чтобы промежуток постепенно исчезал после появления слайда. Сейчас происходит то, что div и span исчезают вместе.

Я пробовал анимацию fadein и еще несколько вещей на пролете, но она не взяла. Есть ли способ, чтобы этот диапазон исчезал через несколько миллисекунд после появления слайда? Я бы не прочь либо CSS или решение сценария, но хотелось бы продолжительность исчезать в слегка после того, как родитель слайд выцветает

код слайдера:.

$(function(){ 

    var _interval; 
    var elem = $(".fadelinks"); 
    elem.find("> :gt(0)").hide(); 
    elem.hover(function() { 
    clearInterval(_interval) 

    }, function() { 
    interval() 

    }); 
    var interval = function() { 
    _interval = setInterval(function(){ 
       elem.find("> :first-child") 
       .fadeOut().next().fadeIn().end() 
       .appendTo(elem); 
       }, 5000) 
    }; 
    interval() 

}); 

HTML, вдоль линий из:

<div class="fadelinks"> 
    <div><span>...</span><img></div> 
    <div><span>...</span><img></div> 
</div> 

с КАС из:

.fadelinks { 
    position:relative; 
    width:555px; 
    height:230px;  
} 
.fadelinks > * { 
    position:absolute; 
    top:0; 
    left:0; 
    display:block; 
} 
.fadelinks span { 
    position:absolute; 
    top:0; 
    left:0; 
    padding:2px 7px; 
    color:#fff; 
    background:#000; 
    opacity:0.8; 
    -webkit-animation:fadein 2s; animation:fadein 2s; 
} 

И here's a JSFiddle с текущий код.

Answer 1

Я был в состоянии получить скрипку работу, добавив ключевые кадры для определения FadeIn:

@keyframes fadein { 
    from { 
    opacity: 0; 
    } 
    to { 
    opacity: 1; 
    } 
} 

/* Safari, Chrome and Opera > 12.1 */ 
@-webkit-keyframes fadein { 
    from { 
    opacity: 0; 
    } 
    to { 
    opacity: 1; 
    } 
} 

Fiddle