HTML and CSS Reference
In-Depth Information
keyframes in braces. Keyframes are defined by the keywords
from
or
to
, or a percentage value:
@keyframes bounce {
from { top: 50px; }
25% { top: 350px; }
50% { top: 50px; }
75% { top: 350px; }
to { top: 50px; }
}
For each keyframe, you provide a semicolon-separated list of
CSS
properties, just as in a normal
CSS
rule. For best effect, these should be
properties that can be transitioned; then the browser can take care of
the intermediate animation. The previous keyframes set the top of the
element to be alternately 50 and then 350 pixels.
To apply the animation to an element, use the
animation-name
property:
#animateme {
position: absolute;
left: 100px;
top: 50px;
animation-duration: 20s;
animation-name: bounce;
animation-iteration-count: infinite;
}
This rule also sets an
animation-duration
—this works the same way as
transition-duration
. The animation will run for 20 seconds, so you can
calculate that the element will have a value of 350 pixels for
top
after 5
seconds: there are four steps after the
from
state, and 5 is 25% of 20 sec-
onds. You can also specify
animation-iteration-count
—this can be a fixed
value such as
3
or, as here,
infinite
, so the element can bounce up and
down forever (or until you get annoyed enough by the bouncing that you
close the tab). See the full source code in ch09/animations-1.html.
In the next example, two properties are animated simultaneously—the
element still bounces up and down, but it also gets bigger as it reaches
the bottom of the bounce.
