The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)

Transitions and Animations 171

1

2

3

4

Figure 14-2: A transition over four stepped intervals

When an animation is displayed in steps, use the direction keyword to
select when the change of each step occurs: the default end keyword means
the change happens at the end of the step (pause, then change), and the
alternative start means the change happens at the start of the step (change,
then pause).
This process is also easier to visualize on the timing function grid; in
the following code, the same step count is shown with differing direction
keywords:

E { transition-timing-function: steps(4, start); }
E { transition-timing-function: steps(4, end); }

You can see the difference in Figure 14-3, and I strongly urge you to
take a look, if you can, at the accompanying example file (available from
http://thebookofcss3.com/)—seeing—seeing) the two in action is the best way to under-
stand the difference.

1

2

3

4

1

2

3

4

Figure 14-3: Comparing direction keywords: start (left) and end (right)