В вашем случае вы хотите что-то вроде загрузчика для вашей веб-страницы, поэтому, когда вы просматриваете главную страницу, она появляется первой, для этого вам нужно установить div, затем поместить его z-index поверх вашей главной страницы, а затем поставить sone.анимация в нем затем устанавливает тайм-аут на этот div, чтобы исчезнуть (display: none / opacity: 0) через определенное время, например, через 5 секунд.тогда все будет так, как вы хотели.
============================================================================
Here is an example of a jQuery library called
//jpreLoader
============================================================================
<!DOCTYPE html>
<html>
<head>
<title>Pre Loader Example</title>
<style>
#jpreOverlay,
#jpreContent {
background-color: #f4711f;
position: absolute;
width: 100%;
height: 100%;
z-index: 99999;
}
#jpreSlide{
position: absolute;
top: 50% !important;
left: 50% !important;
margin: -50px 0 0 -50px;
width: 100px;
height: 100px;
}
#jpreLoader {
position: relative !important;
width: 100% !important;
height: 100% !important;
top: 0 !important;
}
#jprePercentage {
width: 50px;
height: 50px !important;
line-height: 50px;
position: absolute !important;
text-align: center;
left: 50%;
top: 55%;
margin: -25px 0 0 -25px;
z-index: 999999;
font-family:Arial, Helvetica, sans-serif;
font-size: 14px;
color: #fff;
}
#bouncer {
position: absolute;
top: 50%;
left: 50%;
z-index: 11;
margin: -60px 0 0 -40px;
width: 70px;
height: 70px;
background: url(yourImage.jpeg) no-repeat;
-webkit-animation: bounce 1s infinite forwards;
-moz-animation: bounce 1s infinite forwards;
-ms-animation: bounce 1s infinite forwards;
animation: bounce 1s infinite forwards;
}
@-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
40% {-webkit-transform: translateY(-30px);}
60% {-webkit-transform: translateY(-15px);}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-30px);}
60% {transform: translateY(-15px);}
}
</style>
</head>
<body>
<!-- Pre Loader Section -->
<div>
<section id="jpreContent">
<div id="bouncer"></div>
</section>
</div>
<!-- Intro -->
<section id="firstPage">
<p this is main page</p>
</section>
<!-- Scripts -->
<!-- the main jQuery version is 2.1.0 - you can use any version that is compatible with -->
<script src="jquery.min.js" type="text/javascript"></script>
<!-- the preloader library -->
<script src="jpreloader.min.js" type="text/javascript"></script>
<!-- this piece of code can be set in here or any external *js file -->
<script>
$(document).ready(function() {
$('body').jpreLoader({
splashID : "#jpreContent",
showSplash : true,
showPercentage : true,
autoClose : true,
splashFunctin: function() {
$('#bouncer').animate({
'opacity' : 1
}, 500, 'linear'
);
}
});
});
</script>
</body>
</html>
Демо-версию и полную документацию можно найти по ссылке ниже: https://github.com/kennyooi/jpreloader