Скрытие div до начала анимации

Question

Я использую существующую тему из link. При новой загрузке страницы вы видите некоторые элементы div, которые видны до начала анимации страницы.

Под style.css мы видим, что они пытались предотвратить это мерцание перед началом анимации:

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

Это не реально решить проблему. Есть ли способ исправить это раннее отображение элементов div до начала анимации?

Update:

@-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'); 
}); 

Это работает в сафари & светлячок, но не в хроме.

Answer 1

Попробуйте это: -

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