HTML5 and CSS3, 2nd Edition

Tip 26

Making Things Move with Transitions and Animations

CSS3 provides two methods for performing animations: transitions and animations. 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​. 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 ...