Use CSS to create slick animated intro text

Nobody would condone a return to the days of the dreaded Flash intro page, but there’s no reason to be afraid of using some animated content when a visitor first arrives at your site.

Digital agencies who develop dynamic content for their clients particularly need to inject some pizzazz right from the beginning. The Belgian-based agency Mountainview has developed its own site to effortlessly combine a range of web technologies and deliver a fresh and engaging user experience. The agency branding has been fully integrated into the site design and care has been taken at every stage of the design process to create a unique atmosphere for the visitor – and the result? C’est très chic!

TECHNIQUE

Animate the intro

Setting the scene

Using keyframes when creating CSS animations enables you to fine-tune each step of the animation. First of all, the stage needs to be set and a full-screen image is used. Vendor prefixes are omitted from the code here so remember to include them thoughout for complete cross-browser support.

001 html {
 002    background: url(background.jpg)     no-    repeat center center fixed;
 003    overflow: hidden;
 004 }

Defining the class

Content within the .logo class will be centred on the page. The fill-mode ‘both’ holds the animation in its 0% keyframe state before the animation and in its 100% keyframe state afterwards. The animation-name property is used to specify the name of the keyframes you want to bind to the selector.

001 .logo {
 002    text-align: center;
 003    margin-left: auto;
 004    margin-right: auto;
 005    animation-delay: 1.2s;
 006    animation-duration: 4.8s;
 007    animation-iteration-count: 1;
 008    animation-fill-mode: both;
 009    animation-name: logo;
 010 }

Shaping the animation

The logo starts off the bottom of the page and is animated up the page 30px past its loaded position to create a bounce effect. At 65% it continues and finishes with the logo 300px off the top of the page.

001 @keyframes logo {
 002        0% {transform:             translate(000px,1500px); }
 003        20% {transform:         translate(000px,235px); }
 004        25% {transform:         translate(000px,265px); }
 005        65% {transform:         translate(000px,265px); }
 006        100% {transform:         translate(000px,-300px); }
 007        }

The second animation

This animation lasts for just one second and its start is delayed by 5.5s whilst the first animation runs. It then travels down with a little bounce and is held in place using the animation-fill-mode: both; property.

001 animation-delay: 5.5s;
 002 animation-iteration-count: 1;
 003 animation-fill-mode: both;
 004 animation-name: intro;
 005 }
 006 @keyframes intro {
 007         0% {transform:         translate(000px,-400px); }
 008         65% {transform:         translate(000px,165px); }
 009         100% {transform:         translate(000px,135px); }
 010    }

Link and hover

Once you’ve used some animation you can’t just leave it there. A simple hover effect can be added to the link to make the text swell when the user hovers over it.

001 .intro a:hover {
 002    font-size: 20px;
 003    transition: .2s;
 004 }