css淡入淡出視頻控件？

Question

在某些DVD /視頻播放器中，播放/暫停/音量等的控件將疊加在視頻本身的頂部。當您移動鼠標時，控件會淡入，然後經過一段延遲後會淡出（這樣您可以再次欣賞視頻）。

我想知道 - 如何使用CSS創建這種效果？有沒有辦法重置淡入淡出定時器的事件，而非身體鼠標移動？

Answer 1

比方說，我們有如下HTML模板：

<div class="player"> 
    <div class="controls">Controls go here</div> 
</div> 

這是可能的，如果你使用CSS transition-delay：http://jsfiddle.net/teddyrised/7sBwA/

.player { 
    background-color: #333; 
    position: relative; 
    width: 100%; 
    height: 400px; 
} 
.controls { 
    background-color: rgba(0,0,0,.5); 
    border-radius: 5px; 
    color: #eee; 
    padding: 1em; 
    position: absolute; 
    left: 2em; 
    right: 2em; 
    bottom: 2em; 
    text-align: center; 
    pointer-events: none; 
    opacity: 0; 
    transition: opacity .5s ease-in-out; 
    transition-delay: 0; 
} 
    .player:hover .controls { 
     pointer-events: auto; 
     opacity: 1; 
    } 
    .player:not(:hover) .controls { 
     transition-delay: .5s; 
    } 

但是，如果你想更好的瀏覽器支持，你應該使用JS代替。

當使用jQuery，您可以使用jQuery效果時，在我們的例子如.fadeOut()開拓.delay()方法：http://jsfiddle.net/teddyrised/g7kge/

JS：

$(document).ready(function(){ 
    $(".player .controls").hide(); 
    $(".player").hover(
     function(){ 
      // Mouse enters. Fade in controls 
      $(this).find(".controls").fadeIn(); 
     }, 
     function(){ 
      // Mouse leaves. Delay controls fade out by 1000ms 
      $(this).find(".controls").delay(1000).fadeOut(); 
     }); 
}); 

Answer 2

有可能使用CSS與控制淡出定時器：

-(prefix)-transition: all <duration> ease-out <delay>; 

看看這個fiddle。