延遲中的動畫不透明漸隱 - 將圖像的不透明度設置爲0直到X秒？

我有一個圖像顯示，然後淡出在橫幅的開始。延遲中的動畫不透明漸隱 - 將圖像的不透明度設置爲0直到X秒？

HTML -

<div id="logo-fade"><img src="http://www.ison- distribution.com/uploads/arty/halo-logo.png"/></div> 

/* logo animation */ 

@-webkit-keyframes fadeout { 
    100% { opacity: 0; } 
    0% { opacity: 1; } 
} 

@-moz-keyframes fadeout { 
    100% { opacity: 0; } 
    0% { opacity: 1; } 
} 

@keyframes fadeout { 
    100% { opacity: 0; } 
    0% { opacity: 1; } 
} 

#logo-fade { 
    width:970px; 
    height:250px; 
    -webkit-animation: fadeout 5s ease-out forwards ; 
     -moz-animation: fadeout 5s ease-out forwards ; 
      animation: fadeout 5s ease-out forwards ; 
}

我想的圖像，以7秒淡出視頻（在後臺播放）年底前，並保持。

一切都已到位，但最終圖像不透明度在整個時間軸上爲100％，直到最後淡入。

example

/* banner animation */ 

@-webkit-keyframes fadein { 
    100% { opacity: 0; } 
    50% { opacity: 0; } 
    25% { opacity: 0; } 
    0% { opacity: 1; } 
} 

@-moz-keyframes fadein { 
100% { opacity: 1; } 
    50% { opacity: 0; } 
    25% { opacity: 0; } 
    0% { opacity: 1; } 
} 

@keyframes fadein { 
    100% { opacity: 0; } 
    50% { opacity: 0; } 
    25% { opacity: 0; } 
    0% { opacity: 1; } 
} 

#banner-fade { 
    width:970px; 
    height:250px; 
    -webkit-animation: fadein 4s ease-in 12s forwards ; 
     -moz-animation: fadein 4s ease-in 12s forwards ; 
      animation: fadein 4s ease-in 12s forwards ; 
}

來源

2016-03-16 Andrew Hopkins

你能否透露細節，並提供一個小提琴？ –

https://jsfiddle.net/qjax0809/ –

我爲你做的jsfiddle，看到這裏https://jsfiddle.net/sgvcqc4r/

只是：

$('#logo-fade').hide().delay(9000).fadeIn(2000); 
$('#banner-fade').hide().delay(7000).fadeIn(2000);

來源

2016-03-16 10:01:52 Greg

嗨格雷格，這是非常接近！但是開始時的'logo-fade'沒問題;）只是在開始時顯示「橫幅淡出」，我只需要它在最後淡入。 –

就像那個https://jsfiddle.net/sgvcqc4r/4/ :)希望可以幫到 – Greg

是的！謝謝:)我只是稍微改變一下時間，但是非常感謝你。 –

這難道不是更容易使用jQuery中的淡入（）函數？ http://api.jquery.com/fadein/

來源

2016-03-16 09:49:44

如果可能，我想只使用CSS，就像Halo徽標在開始時淡出一樣。 –

延遲中的動畫不透明漸隱 - 將圖像的不透明度設置爲0直到X秒？

回答

相關問題