HTML and CSS Reference
In-Depth Information
1.
In the
.sidebar aside:hover
rule set, add the declaration
-webkit-transition: -webkit-
transform .5s;
.
2.
Add a new rule set for
.sidebar aside
below the
.sidebar
rule set with the declaration
-webkit-
transition: -webkit-transform .5s;
.
Project files update (ch14-01): 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 Z Using Keyframes
The transitions you just added to the page make an element smoothly change from one property value to another
over a specific period of time. These transitions occur when an event is triggered, such as a user hovering over an
element.
Animations also make an element smoothly change between different property values, but unlike transitions, they
don't have to just consist of a start and end state. Using keyframes, you can create points that an animation should
reach before changing again, allowing much more control over the effect onscreen. If an animation is 10 seconds
long, you can specify exactly what happens over that period of time, maybe changing an element's color to blue at 2
seconds, green at 6 seconds, and black at 10 seconds. Animations can also be triggered by events or can be started
when the page is loaded, with options to allow you to decide how many times an animation should repeat.
To demonstrate animations, you turn the product showcase (the section with the image of some trainers and a More
Information button) into a set of images that cycle from one to the other.
Set up the basics first:
1.
In index.html, find the following code:
<div class=”showcase”>
<img src=”images/banner-trainers.jpg”
alt=”Some of our cool trainers” />
<a class=”button purchase” href=”#” title=”Purchase product”>
More Information
</a>
</div>
2.
Replace it with the following:
<div class=”showcase”>
<ul>
<li>
<img src=”images/banner-trainers.jpg”
alt=”Some of our cool trainers” />
</li>
<li>
<img src=”images/banner-shoes.jpg”
