HTML and CSS Reference
In-Depth Information
this, though, the product showcase is always a set height and doesn't shrink with the images when the browser win-
dow is resized.
Finally, you use another pseudo-selector, .showcase li:nth-child(2) , to select the second list item and
place that below the first, using z-index .
With this code added, you're good to go! Now to animate the showcase images...
Unprefixed browser support: IE 10+, Firefox 16+, Opera 12.5+
Prefixed browser support: Firefox 5+, Chrome 1+, Opera 12+, Safari 4+
When creating CSS animations, you must declare the states of an animation in a @keyframes rule. Because anim-
ations are still experimental, you should prefix the @keyframes rule, such as @-webkit-keyframes .
1. In styles.css, below the .showcase .button:hover rule set, add a @keyframes rule:
@-webkit-keyframes fadeOut {
This rule consists of the prefixed @-webkit-keyframes keyword and an identifier fadeOut , which is the
name of the animation you will create; you're free to use whatever identifier you like. The name of the
@keyframes rule is referenced using the animation-name property, which links the animation you're
going to create to the element you want it to apply to.
Within this @keyframes rule, you can now place rule sets that act as the states of the animation:
2. In the @-webkit-keyframes fadeOut rule, add the following rule sets:
from {
opacity: 1;
to {
opacity: 0;
3. Save styles.css.
The first rule set, from , tells the browser an element should begin with an opacity of 1 (opaque) and then anim-
ate to an opacity of 0 (transparent). Because the fadeOut animation is not yet linked to an element, no ele-
ments fade yet.
The from keyword represents 0% of an animation (the start), and the to keyword represents 100% (the end). An
animation that goes from 0% to 100% works in the same way as a transition (changing from one style to another),
but within animations, unlike transitions, you can add keyframes anywhere, using percentage values. Later, you use
this rule to complete the cycling product showcase:
@-webkit-keyframes fadeOut {
from {
opacity: 1;
z-index: 4;
Search WWH ::

Custom Search