CSS3 continues to expand what you can visually accomplish in your web pages. Animation is now also available to you as a design choice. Animation is split into two key parts: transitions and transforms. ã Transitions control the change of state for an element, such as text fading in or changing color. ã Transforms control the placement of an element. The following two sections explain how you can control these two new animation techniques in your CSS designs. Using Transitions in CSS The transition effect is best used when you create a class and then a hover pseudo class to illustrate when the effect is to happen (i.e., when your cursor moves over the element). The transition itself is made of three parts: ã Property—the linked property between the two classes ã Duration—how long in seconds the transition will take ã Timing function The timing function keywords have the following definitions: ã Linear—the linear function just returns as its output the input that it received. ã Ease—the default function, ease, is equivalent to cubic-bezier (0.25, 0.1, 0.25, 1.0). ã Ease-in—the ease-in function is equivalent to cubic-bezier (0.42, 0, 1.0, 1.0). ã Ease-out—the ease-out function is equivalent to cubic-bezier (0, 0, 0.58, 1.0).