HTML and CSS Reference
In-Depth Information
}
16.666% {
opacity: 0;
z-index: 4;
}
50% {
opacity: 0;
z-index: -1;
}
51%{
opacity: 1;
}
}
This animation makes an element start with a
z-index
of
4
, and then 16.666% (I explain this percentage later) into
the animation, change its
opacity
to
0
(fading out the element). At 50% in, the
z-index
changes to -
1
(moving
the element behind other elements in the product showcase), and then at 51% in, the
opacity
changes back to
1
to
make the element visible again, ready for the animation to be cycled.
Don't worry if this description goes over your head. For now, stay with the simple
from
-
to
animation to learn
how to apply it to an element and then come back to this more complex animation later.
animation-name
Initial value:
none
| Inherited: No | Applies to: all elements | CSS3
Unprefixed browser support: IE 10+, Firefox 16+, Opera 12.5+
Prefixed browser support: Firefox 5+, Chrome 1+, Opera 12+, Safari 4+
The
animation-name
property links an element to a
@keyframes
rule. The animation you added to styles.css
is called
fadeOut
, so reference that now:
1.
In styles.css, in the
.showcase li:first-child
rule set, add the following declaration:
-webkit-animation-name: fadeOut;
2.
Save styles.css.
That's all there is to it. The first list item now has the
fadeOut
animation applied to it, but the element doesn't an-
imate just yet because it doesn't know how long to animate.
You can also give the
animation-name
the value
none
, in case you need to stop an element from inheriting an
animation.
animation-duration
Initial value:
0s
| Inherited: No | Applies to: all elements | CSS3
Unprefixed browser support: IE 10+, Firefox 16+, Opera 12.5+
Prefixed browser support: Firefox 5+, Chrome 3+, Opera 12+, Safari 4+
