HTML and CSS Reference
In-Depth Information
SETTING ANIMATION DURATION
Yo u r a n i m a t i o n w o n ' t d o a n y t h i n g y e t : I n a s i m i l a r m a n n e r t o t r a n s i t i o n s , y o u h a v e
to tell it how long to last using
animation-duration
:
ul {
.
animation-name: menu-move;
animation-duration: 2s;
}
This property can take a value with any CSS time units, although you'll most
likely use seconds.
SPECIFYING THE NUMBER OF TIMES TO RUN THE ANIMATION
The
menu-move
animation will actually work as required already. It will slide into
view once, and only once, because by default animations will play only once. If
you want them to play more than once, you need to specify how many times using
animation-iteration-count
. This property accepts a positive number value or
the keyword
infinite
if you want your animation to go to infinity and beyond (I
tried typing that with a straight face and failed).
The
menu-move
animation is required only once, so you needn't explicitly set
it. For the
button-glow
animation, on the other hand, once is not enough. You
want the animation to carry on until your site visitors stop hovering/focusing the
buttons. Therefore, you should use
infinite
:
a:hover, a:focus {
.
animation-name: button-glow;
animation-duration: 1.5s;
animation-iteration-count: infinite;
}
NOTE:
Setting decimal values for
animation-iteration-count
(e.g. 0.5)
will make the animation play only part of the way through.
