HTML and CSS Reference
In-Depth Information
Sometimes you may want more than the simple linear movement
between a set of properties that a transition allows. For example,
you may want an element to bounce or cycle through several states.
The next section shows you how to create these kinds of animations.
CSS Animation
CSS
Animations are a way of chaining
multiple transitions together on the
same property to be performed one
after the other. Transitions are always
linear—a single transition can move an
element from one location to another,
but it can't move it to a third location
after that. Although you can chain
transitions together using
transition-
delay
, this technique quickly becomes
unwieldy for more than a few steps,
and you can still transition only one
property at a time. You could, of
course, perform a whole sequence of transitions with JavaScript, but
that would defeat the purpose of transitions—a declarative solution for
simple animations.
This first example makes an element bounce up and down.
Full
Partial
-
4.0
-
5.0
10
-
12
-
4.0
To declare an animation, use the
@keyframes
directive. The first word
after the directive is the name of the animation, followed by a list of
