HTML and CSS Reference
In-Depth Information
To apply multiple animations, list the names of the
@keyframes
rules separated by commas:
animation-name: animation1, animation2, animation3;
Ti
■
The specification doesn't say whether the
@keyframes
rules need to come before the style rules that use
them. in my tests, it didn't seem to matter. But it's probably easier from the maintenance point of view to define
keyframes first and then apply animations using the properties in Table
21-1
.
Setting the Duration of an Animation
The
animation-duration
property takes as its value one or more times specified as seconds (
s
) or thousandths
of a second (
ms
). If multiple times are specified, they're applied to the animations in the same order as listed for
animation-name
.
The styles for faq.html in the ch21 folder are in styles/faq.css. They define a set of keyframes called
highlight
and then apply the animation to the
:target
pseudo-element of
<article>
elements like this:
@keyframes highlight {
from {
background-color: rgba(255,204,0,0);
animation-timing-function: ease-out;
}
50% {
background-color: rgba(255,204,0,.3);
animation-timing-function: ease-out;
}
to {
background-color: rgba(255,204,0,0);
}
}
article:target {
animation-name: highlight;
animation-duration: 4s;
}
This draws attention to an
<article>
element that has been accessed through a link with a URL fragment
by fading up a pale yellow background behind it, and then fading out the background. The animation lasts four
seconds, with the yellow background at its most intense at the halfway mark (see Figure
21-1
).
