How to add a timed introduction page before the main page?

So, I have a project in MVC and I want to add a introduction page to show my logo with an animation when I load the site. I want it to be timed, for example, it appears the animation and then it redirects by himself to the main page. How can I do it? Do I have to change my routes?

Solution

In your case you want something like a loader for your webpage so when you browse the main page it appears first, for that you have to set a div then put the z-index of it top of your main page then put sone animation in it then set a timeout to that div to disappear (display: none / opacity: 0) in a specific time for example after 5 secounds. then everything would be as you wished.

============================================================================
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>

you can find a demo and full documentation in link below: https://github.com/kennyooi/jpreloader