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();
});
