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

FIGURE 5.22 An animated
menu (the animations, unfor-
tunately, look like rubbish on
the printed page).
SETTING UP A BASIC ANIMATION
Animation has a few extra features compared to transitions, but it also has many
of the same features, such as timing functions, delays, and so on. Therefore, if
you've already mastered transitions, a segue into animations should be fairly easy.
Let's start by looking at a simple example: Load the animation-basics.html in
the chapter5 code download folder to see a little navigation menu that slides into
the browser window when the page first loads—in an Apple website kind of way
( Figure 5.22 ). When you mouse over/focus one of the menu buttons, it doesn't
just smoothly transition once; it glows smoothly for the whole time it is focused.
Yo u c of u l d n ' t d of e i t h e r of f t h e s e t a s k s w i t h t r a n s i t i of n s ( w e l l , n of t w i t h of u t t h e a i d
of JavaScript).
To s e t u p a C S S A n i m at i To n , y To u m u s t fi rs t s p e c i f y a s e t To f ke y f ra m e s fo r t h at
animation. The animated menu code contains the following two keyframe blocks:
@keyframes menu-move {
from { transform: translateY(-200px); }
to { transform: translateY(0); }
}