HTML and CSS Reference
In-Depth Information
The paragraphs then fade in and out over 10 seconds. The fade-in uses
the timing function
ease-in
(start slow and finish fast), and the fade-out
uses
ease-out
so the disappearing paragraph begins to fade out as
quickly as possible, giving immediate feedback to the user:
section { position: relative; }
p {
opacity: 0;
position: absolute;
transition-duration: 10s;
transition-timing-function: ease-out;
}
p:target {
opacity: 1;
transition-timing-function: ease-in;
}
See the full source code in ch09/transitions-6.html.
Transition property
So far, the examples have implicitly chosen which properties they will
apply to by only listing the changed ones in the transition state. Every
property has therefore been subject to the same duration and timing
function. But it's possible to apply multiple transitions to the same ele-
ment, with each one affecting a different property.
In this section, you'll take advantage of the fact that all the transition
properties accept multiple properties in a comma-separated list. You
can declare two transition durations, one of 10 seconds and one of 20,
like this:
transition-duration: 10s, 20s;
Then, if you declare
transition-property
like this
transition-property: top, transform;
the transition of the
top
property will take 10 seconds, and the transi-
tion of the
transform
property will take 20 seconds. The next example
compares two elements with the same transition duration but different
transition properties.
