HTML and CSS Reference
In-Depth Information
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.
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.
Search WWH ::

Custom Search