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。