Wikidot Design & Development

Animated page entry with CSS3

Create a subtle yet effective page load effect with pure CSS3.

With the continued development of modern browsers, more and more things are possible with CSS3 animations, and they grow ever more complex. Yet it is the simple things that may be most effective in enhancing user experience. Today we’ll look at one of these very simple ways of using CSS3 animations - using them to progressively fade in a page’s content.

Building on the example used by Apple recently with the release of the Beatles on iTunes, we’ll build a very simple ‘teaser’ page that fades in.

Site design © BMC WebDesign, 2011. All rights reserved. All tutorials on this site are free for commerical use, subject to conditions outlined in the disclaimer.