ANIMATED EFFECTS USING CSS3 - Practical CSS3: Develop and Design - page 198

ENHANCING A BANNER AD

WITH ANIMATIONS

In Chapter 4, I introduced you to the Dead Hamster banner ad—a fair stab at creat-
ing a banner advertisement with open standards as opposed to Flash, which looks
cool and draws people in. Now you'll enhance the banner using CSS Animations,
Transitions, and Transforms.
To re f re s h y To u r m e m To r y To in t h e s t at e i in w h i c h y To u l e f t t h e l a s t v e rs i To in , To p e in
the example in the poster code download folder. You can also use this file as a
starting point from which to add animations. Here you'll look at some new code
additions to add exciting swooshy bits to the banner!

NOTE: The finished code example from this section can be found in
the poster-animations-transforms-transitions code download folder.

Look at the first frame ( <div id=”frame1”> in the HTML). This would look
deliciously cool (and not at all like a middle manager's PowerPoint presentation)
if you had the different items of text whooshing into the ad, no?
To dif- To t h i s , y To u fi rs t n e e dif- t To s e t u p t h e a n i m at i To n s y To u n e e dif- . Fo r t h e fo u r dif- i f -
ferent pieces of text, try these on for size:

@keyframes horizontal-left-150 {
from {transform: translateX(150px);}
to {transform: translateX(0px);}

}

@keyframes horizontal-right-400 {
from {transform: translateX(-400px);}
to {transform: translateX(0px);}

}

@keyframes horizontal-right-500 {
from {transform: translateX(-500px);}
to {transform: translateX(0px);}

}