HTML and CSS Reference
In-Depth Information
-moz-transition: left 5s ease-out 5s, background-color 5s ease 0s;
-webkit-transition: left 5s ease-out 5s, background-color 5s ease 0s;
-o-transition: left 5s ease-out 5s, background-color 5s ease 0s;
}
Animations
At times, you might want more control over your animations. For instance,
wouldn't it be nice if you could animate from one position to another while
altering certain CSS properties at certain points in your animation? This is better
known as keyframing. If you have experience in Flash animation, you will know it
better as creating significant alterations to an object in the flash timeline and
creating tweens between them. Keyframes are now available in CSS. As always,
this is vendor specific at the time of writing, so use all of the available vendors
for compatibility. For this demo, you will animate a circle on the screen and
make it bounce.
Before diving into creating the bouncing ball animation, look at the intended
animation shown in Figure 5-3.
Figure 5-3.
Desired animation sequence
As you can see from the animation sequence in Figure 5-3, the intention is to
mimic a bouncing ball. The CSS keyframes feature allows you to specify the
