HTML and CSS Reference
In-Depth Information
But I wouldn't recommend this rewrite, especially not for complicated anima-
tions: It is much easier to visualize the animation progression when the keyframes
are written out in the order in which they occur.
Yo u c a n h a v e a s m a n y k e y f r a m e s a s y o u w a n t a n d a s m a n y p r o p e r t i e s s p e c i fi e d
inside each keyframe as you want, meaning that complex animations are possible.
Yo u c a n s t a r t y o u r k e y f r a m e s a t a v a l u e g r e a t e r t h a n 0 % — f o r e x a m p l e ,
50%
,
60%
,
100%
. But nothing will happen for the portion of the keyframes where nothing is
specified.
APPLYING AN ANIMATION TO AN ELEMENT
So you've learned how to declare an animation block, but how on earth do you
actually apply that animation to something on your page? That's simple; you apply
the element to any ruleset you like using the
animation-name
property with the
animation's identifying name as the property value:
ul {
.
: ;
}
This is very useful because it means you only have to define an animation once,
and then you can apply it to as many different rulesets as you want. You could have
a whole bank of animation classes set up, and then add them where you need them.
