0
SHARES
Page Transition Effects
March 7, 2017
0 comments
11,648
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:

CSS

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



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.

0
SHARES
0
0
0
0
About the author
Popa Robert: Is the founder of Simbyone.com, freelance web developer and designer, he likes to create beautiful websites and water cooled PC's
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.
Hot Posts
11,649
0 comments
1,238,227
23 comments
112,004
0 comments