HTML5 and CSS3, Second Edition

Tip 26

Making Things Move with Transitions and Animations

CSS3 provides two methods for performing animations: transitions and ani-

mations. They’re similar in how they work, but serve two distinct purposes.

Transitions let us state that we want a property to gradually change from one

value to another. Animations let us get more specific, defining keyframes for

complex animations.

We’ve been asked to “spice up” the login form we did back in Tip 23, Rounding

Rough Edges, on page 153. The product manager wants to see the form fields

fade to a different color when the user gives them focus, and he wants the

form to “shake” when the user enters the wrong username and password. We

can use simple transitions for the form fields, and animations for the form.

Creating Fades with CSS Transitions

In Tip 9, In-Place Editing with contenteditable, on page 59, we wrote some CSS

that changed the background color of an element when the element had focus:

li>span[contenteditable=true]:focus{

background-color:#ffa;

border:1px shaded#000;

}

The change happens abruptly, with the new background color and border

replacing the old ones. But with CSS transitions, we can make it happen over

a period of time. All we have to do is define how we want the transition to

work, how long it should take, and what properties should be affected.

We can use the following properties to define transitions:

• transition-property defines the CSS property that should be transitioned.


• transition-duration specifies how long the transition should take.


• transition-delay lets us define how long to wait before starting the transition.


• transition-timing-function specifies how the intermediate values of the transition
  are specified.

report erratum • discuss

Making Things Move with Transitions and Animations • 169

Download from Wow! eBook <www.wowebook.com>