在動畫開始之前隱藏div

Question

我使用link的現有主題在新加載頁面時，您確實在頁面的動畫實際啓動之前看到一些div元素可見。

在style.css中我們也看到，他們試圖防止閃爍動畫開始之前：

-webkit-animation-fill-mode: both; 
animation-fill-mode: both; 

並沒有真正解決問題。有沒有辦法在動畫開始之前修復div元素的早期顯示？

更新：

@-webkit-keyframes fadeOut { 
    0% { 
    opacity:0; 
    width:0; 
    } 
    1% { 
    opacity:1; 
    } 
    100% { 
    opacity:1; 
    width:100px; 
    } 
} 

@keyframes fadeOut { 
    0% { 
    opacity:0; 
    width:0; 
    } 
    1% { 
    opacity:1; 
    } 
    100% { 
    opacity:1; 
    width:100px; 
    } 
} 

.fadeOut { 
    -webkit-animation-name: fadeOut; 
    animation-name: fadeOut; 
} 

我看到這個問題發生在Chrome和移動設備。

$(document).ready(function() { 
    $('div#tp-caption').hide('slow'); 
}); 

這個工程在safari & firefox，但不是在鉻。

Answer 1

嘗試： -

@keyframes slidein { 
    0% { 
    opacity:0; 
    width:0; 
    } 
    1% { 
    opacity:1; 
    } 
    100% { 
    opacity:1; 
    width:100px; 
    } 
}