Animated page entry with CSS3

27 Nov 2010 23:52

27 Nov 2010 23:52

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.

Markup

So first, the markup…

<body>
<div id="content">
 
    <p>
        <span class="fade-in one">Tomorrow will be just another day.</span>
    </p>
 
    <p>
        <span class="fade-in two">You will</span> <span class="fade-in three">&nbsp;never</span> <span class="fade-in four">&nbsp;forget.</span>
    </p>
 
    <p>
        <span class="fade-in five">See you at 10am.</span>
    </p>
 
</div> 
</body>

CSS

And now the CSS. We’ll use two animation keyframes: one to ‘reset’ the spans so that by default they have opacity of 0 (this way browsers that don’t support the animation can still have an opacity of 1), and the other to work the fade in effect.

@keyframes reset {
0% {
    opacity: 0;
}
100% {
    opacity: 0;
}
}
 
@keyframes fade-in {
0% {
    opacity: 0;
}
60% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}

We then apply these animations to the .fade-in class with separate delays for each span.

.fade-in {
    animation-name: reset, fade-in;
    animation-duration: 3s;
    animation-timing-function: ease-in;
    animation-iteration-count: 1;
}
 
.fade-in.one {animation-delay: 0, 0;}
.fade-in.two {animation-delay: 0, 1s;}
.fade-in.three {animation-delay: 0, 1.5s;}
.fade-in.four {animation-delay: 0, 2s;}
.fade-in.five {animation-delay: 0, 3s;}

And that’s all there is to it. You can build on this greatly by animating other properties, such as height, width, margins and positioning values. You may have noticed that I recently employed webkit animations to fade in images within the BMC Blog.

You can see the page in action by pressing the big blue button below - you'll need to be running Chrome of Safari to see the animations.

View Demo Site

<!doctype html>
<html lang="en">
    <head>
    <script type="text/javascript" src="http://bmccreative.com/local--files/blog:animated-page-entry-with-css3/prefixfree.js"></script>
        <style type="text/css">
 
/* FadeIn CSS, v0.4.  */
 
@font-face {
    font-family: 'Qlassik';
    src: url('http://bmcenterprises.wdfiles.com/local--files/fonts/Qlassik_TB-webfont.eot');
    src: local('☺'), url('http://bmcenterprises.wdfiles.com/local--files/fonts/Qlassik_TB-webfont.woff') format('woff'), url('http://bmcenterprises.wdfiles.com/local--files/fonts/Qlassik_TB-webfont.ttf') format('truetype'), url('http://bmcenterprises.wdfiles.com/local--files/fonts/Qlassik_TB-webfont.svg#webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
html {
    height: 100%;
    width: 100%;
} 
html {
    background-color: #fff;
    background-image: linear-gradient(top, #fff, #e4e4e4);
}
 
#content {
    display: block;
    position: absolute;
    top: 50%;
    width: 98%;
    padding: 0;
    margin-top: -200px;
    text-align: center;
    height: 400px;
}
 
.fade-in {
    font: normal 40px/2 'Qlassik';
    color: #333;
}
 
.one {font-size: 50px;}
.five {font-size: 30px;}
 
@keyframes reset {
0% {
    opacity: 0;
}
100% {
    opacity: 0;
}
}
 
@keyframes fade-in {
0% {
    opacity: 0;
}
60% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}
 
.fade-in {
    animation-name: reset, fade-in;
    animation-duration: 3s;
    animation-timing-function: ease-in;
    animation-iteration-count: 1;
}
 
.fade-in.one {animation-delay: 0, 0;}
.fade-in.two {animation-delay: 0, 1s;}
.fade-in.three {animation-delay: 0, 1.5s;}
.fade-in.four {animation-delay: 0, 2s;}
.fade-in.five {animation-delay: 0, 3s;}
 
a.again {
    background-color: #6bd3ee;
    background-image: linear-gradient(top, #6bd3ee, #2c9bd4);
    font-size: 20px;
    font-weight: normal;
    padding: 5px 18px;
    border-radius: 20px;
    border-top: 1px solid #baebfc;
    box-shadow: 1px 1px 0 #1c92b0, 0 2px 2px rgba(0,0,0,0.4);
    color: #fff;    
    text-shadow: #257ca7 0 1px 1px;
    -webkit-background-clip: padding-box;
    text-decoration: none;
    font-family: 'Qlassik';
    margin: 40px 10px 0;
    display: inline-block;
    animation-name: reset, fade-in;
    animation-duration: 6s;
    animation-timing-function: ease-in;
    animation-iteration-count: 1;
    animation-delay:0, 6s;
}
a.again:hover {
    background-color: #6ad9fa;
    background-image: linear-gradient(top, #6ad9fa), #39b0ed);
    color: #fff;
    text-decoration: none;
}
a.again:active {
    background-color: #22b4d9;
    background-image: none;
}
a.again.red {
    background-color: #b02b34;
    background-image: linear-gradient(top, #ee3c42), #b02b34);
    border-top: 1px solid #f1554a;
    box-shadow: 1px 1px 0 #bc2f38, 0 2px 2px rgba(0,0,0,0.4);
    text-shadow: #98262d 0 1px 1px;
}
a.again.red:hover {
    background-color: #ff434f;
    background-image: linear-gradient(top, #ff434f), #cb333a);
}
a.again.red:active {
    background-color: #ba313a;
    background-image: none;
}
a.again:before {
    content: '\2190   ';
    font-weight: bold;
}
a.again.red:before {
    content: '';
}
 
        </style>
        <link rel="shortcut icon" href="/local--favicon/favicon.gif"/> 
    <link rel="icon" type="image/gif" href="/local--favicon/favicon.gif"/>
        <title>Demo - animated page loading with CSS3</title>
    </head>
    <body>
        <div id="content">
 
        <p>
            <span class="fade-in one">Tomorrow will be just another day.</span>
        </p>
 
        <p>
            <span class="fade-in two">That you will</span> <span class="fade-in three">&nbsp;never</span> <span class="fade-in four">&nbsp;forget.</span>
        </p>
 
        <p>
            <span class="fade-in five">See you at 10am.</span>
        </p>
 
        <p> 
            <a href="/blog:animated-page-entry-with-css3" class="again">back to the BMC Blog</a> <a href="/local--code/blog:animated-page-entry-with-css3/5" class="again red">see it again</a>
        </p>
 
        </div> 
    </body>
</html>

Enjoy the article? Tweet it!

tags — animation page-entry pure-css

Discussion - No comments yet…61 comments

Add a New Comment
or Sign in as Wikidot user
(will not be published)
- +
Help: wiki text quick reference
_archive2010animationpage-entrypure-css
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.