HTML and CSS Reference
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 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
that would defeat the purpose of transitions—a declarative solution for
This first example makes an element bounce up and down.
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