HTML and CSS Reference
In-Depth Information
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 proper-
ties 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
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 {
cursor: default;
-webkit-transform: translate(75px, -25px) rotate(-45deg) scale(1.1);
}
3.
Save styles.css.
As yet, these changes haven't added a transition to the banner. In the first step, you make the banner scale down to
80%. Then by adding the
.banner-ad:hover
rule set, you make it so that the banner will scale up to 110% when
hovered over. Think of the first rule set as the start state and the
:hover
rule set as the end state of a transition. You
are telling the browser how the banner should look at the start and end. Now you need to tell it how to transition
between those two states using several
transition
properties.
