HTML and CSS Reference
In-Depth Information
Chapter 8
Easing and Springing
What we'll cover in this chapter:
Proportional motion
Easing
Springing
It's hard to believe that it took seven chapters to get through “the basics,” but here you are at Chapter 8,
the beginning of the advanced stuff. Or, the point where things start to get
really
interesting. Up to now,
each chapter covered more general techniques and concepts. Beginning with this chapter, we'll be
concentrating on one or two specialized types of motion per chapter.
In this chapter, we'll look at easing (proportional velocity) and springing (proportional acceleration). But
don't think that because there are only two items, this is a chapter you can skim through quickly. These
techniques can be used to create some very complex motion, and you'll use them a lot. There are plenty of
examples to look through, so you can get an idea of just how powerful these techniques are.
Proportional Motion
Easing and springing are closely related, both techniques involve moving an object from an existing
position to a target position. In easing, the object kind of slides into the target and stops. In springing, it
bounces around back and forth for a bit, and then finally settles down at the target. The two techniques
have the following in common:
You set a target.
You determine the distance to that target.
