CHAPTER 2 ■ CSS3 TRAnSfoRmS And TRAnSiTionS
img.tilt:hover {
opacity: .2; left: 60px;
}
I’ve added position: relative in order to be able to move the element by changing the value of its left,
and improved the efficiency of the animation by clearly stating the properties to be animated. (Obviously you
don’t have to prefix properties that are well-supported across all browsers, such as opacity.) You’ll notice that the
left-to-right animation may not be particularly smooth in some browsers. Let’s change the animated property to
translate, as shown in Listing 2-18.
Listing 2-18. A CSS3 Translation Transition
You may find that the movement is now smoother; translate is a good alternative for animating the
movement of HTML elements via manipulation of absolute or relative positioning.
Introducing Easing Functions
Observe closely the movement of the image on mouseover in the animations you have created so far: there’s
something a little special about it (lengthening the time value for the animation may help make this clearer). The
motion of the image is not mechanical, but organic: from its default position, the picture speeds up as it rotates,
reaches a constant speed for a moment, then slows down before it comes to rest.
In animation, this kind of motion is referred to as ease in/ease out. It is the motion of objects in the everyday
world. For example, no car, no matter how powerful, can attain a 0–60 speed record of 0 seconds. Every moving
object accelerates to a certain velocity; at the end of its travel (outside of an extreme situation, such as a car
crashing into a brick wall at top speed) the object will slow down before coming to a stop.
In CSS3 animation, ease transitions are the default; there’s no need to state that you are using them. If you
want to use animation with a more “mechanical” feel to it, you can start by specifying a linear transition (see
Listing 2-19).