CHAPTER 2 ■ CSS3 TRAnSfoRmS And TRAnSiTionSListing 2-19. CSS for a Linear Rotation Transition
You’ll see that the motion of the image on mouseover is now far more mechanical.Transition Timing Functions and Bezier Curves
linear and ease are just two forms of what are referred to as timing functions, that is, descriptions of the way
in which an object gets from A to B in a straight line. These timing functions may be graphed in a mathematical
expression known as Bezier curves.
For example, if you graphed the motion of an element during its transition from 0 to 15 degrees under linear
conditions, with time assigned to the horizontal axis and the angle of the image assigned to the vertical, the graph
for linear animation would look like Figure 2-8. As time progresses, the angle of rotation increases in lockstep
with the passing seconds, creating a constant rate of motion.
Removing the linear keyword from the declaration returns the animation to its natural easing state, which when
plotted on the same axes would look more like Figure 2-9.
Figure 2-8. Graph for linear animation: time on x (horizontal) axis, distance/angle on y (vertical) axis.
Note the direct relationship