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.
Search WWH ::

Custom Search