CSS3 Foundations

chapter fourteen

Bringing Your Website to Life with Transitions and Animations

Possibly CSS3’s most exciting features are transitions and animations. Transitions allow the values of properties to change smoothly over a specific duration, meaning the color of an element can fade from red to blue, slide from one area of the page to another, shrink and grow when hovered over, and so on. The possibilities are endless.

Whereas transitions change an element from a start to end state, animations allow you to have more control over those states, specifying keyframes, the exact moments when a property should change.

Project files update (ch14-00): If you haven’t followed the previous instructions and are comfortable working from here onward or would like to reference the project files up to this point, you can download them from www.wiley.com/go/treehouse/css3foundations.

Animating Elements from A to B Using Transitions

To demonstrate transitions, make the “25% Off” banner transition in size when it’s hovered over. Before you add transitions to the element though, first set up the start and end states of the transition:

1. In styles.css, find the .banner-ad rule set and modify the transform declaration to reduce the scale() function, as follows:

-webkit-transform: translate(75px, -25px) rotate(-45deg) scale(.8);

2. Below the .banner-ad rule set, add a new rule set:

.banner-ad:hover ...