css3 исчезает при загрузке страницы, исчезает через несколько секунд

Некоторое время я искал ответ в stackoverflow для получения ответа, но мне кажется, что этот вопрос еще не задавался.

извините, если бы я мог где-то пропустить ответ, но здесь он идет:

Итак, я работаю над страницей, которая исчезает в div при загрузке страницы, теперь я хочу, чтобы она исчезла через несколько секунд. я не могу найти правильный способ сделать это.

@-webkit-keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
@-webkit-keyframes fadeout {
from {
    opacity:1;
}
to {
    opacity:0;
}
}
div {
width: 400px;
margin: 0 auto;
text-align: center;
-webkit-animation:fadein 1s;
-webkit-animation:fadeout 1s;
-webkit-animation-delay:fadeout 5s;
}

HTML:

 <div>
 <h1><font size="+6"> :(</font></h1><br />
 <h1>Whoops<span>Something went wrong</span></h1><br />
 <h1><span><div id="timer_div">you will be redirected in</div> seconds</span></h1>
 </div>

Ответы на вопрос(4)

Ваш ответ на вопрос