CSS3 for Mobile - Learn HTML5 and JavaScript for Android - page 123

CSS styles that you would like to animate at percentage increments. We can
use the information shown in Figure 5-3 to create the keyframe rule.
You begin by creating a new keyframe definition using the @keyframes rule and a
name for the keyframe as shown in the following code.
@keyframes bouncyball {
}
Next, you specify where you would like the animation's attached element to
start using the percentage marker and CSS styles.
@keyframes bouncyball {
0% { top: 0px; left: 0px; }
}
Here, you have specified that the associated element should start from the top
left.
Next, you specify the individual segments within the animation. Using Figure 5-3
as a guide, there are CSS rules for 0%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%,
87.5%, and 100%.
@keyframes bouncyball {
0% { bottom: 100%; left: 0px; }
12.5% { bottom: 0px; left: 12.5%; }
25% { bottom: 50%; left: 25%; }
37.5% { bottom: 0px; left: 37.5%; }
50% { bottom: 25%; left: 50%; }
62.5% { bottom: 0px; left: 62.5% }
75% { bottom: 12.5%; left: 75% }
87.5% { bottom: 0px; left: 87.5% }
100% { bottom: 0px; left: 100% }
}
Now it's time to create a new CSS rule for your ball. The following code will
create a circle from a square, and apply the animation to the element.
.ball {
background: black;
width: 100px;
height: 100px;
position: absolute;
border-radius: 50px;
animation: bouncyball 2s ease-in-out;
-moz-animation: bouncyball 2s ease-in-out;
-webkit-animation: bouncyball 2s ease-in-out;
}