Page transitions can be used when the page has finished loading to create a nice page loading effect. Animations are possible entirely without using JavaScript. All the animations are stored inside animations.css file.

All the other styles related to the layout of the page are inside main.css, helper-margin.css and helper-padding.css but they don't anything to do with the animations.

HTML

This is the HTML for this page is not really relevant. The entire html structure of the page was created just for display purpose.

To use the animations as page transitions is extremely easy, all you have to do is use the desired animation class and use it as the body class of the document. It should look something like this:

<body class="fadeIn">

CSS

Each transition effect is a css keyframes animation stored inside animations.css file.

@-webkit-keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

.fadeIn {
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

JavaScript

No JavaScript is needed for page transitions however if you are dealing with a slow server you can add some JavaScript that will make the whole process easier on the eyes.

What you can do is to make the 'body' tag invisible using 'display:none;' css and make it visible after the page has finished loading.

$( document ).ready(function() {
   $('body').show();
});

0 Comments

Would you like to share your thoughts?

Name:*

Email:*

Website:

Message:*

Fields marked with * are mandatory. We don't share your email with anyone. Email provided in the above fields are used for identification only. If you chose to subscribe to our newsletter you can cancel at any time.
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.