HTML and CSS Reference
In-Depth Information
In this example, the glowing effect for the buttons was a bit too jerky using
the default
ease
timing function, so I changed it to
linear
for a smoother feel:
a:hover, a:focus {
.
animation-name: button-glow;
animation-duration: 1.5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
ADDING A DELAY
Yup, you guessed it; it is also possible to add a delay before an animation starts by
adding an
animation-delay
value. This property is a lot more useful with anima-
tion than it is with transitions. For instance, you could have an animated sequence
occur on page load or after a button is activated with multiple animations occurring
at different times. This type of result is not practical to achieve with transitions.
TIP:
Yo u c a n a l s o g i ve
animation-delay
a negative value to make the animation start
partway through the specified
animation-duration
.
ANIMATION-DIRECTION: BACK AND FORTH, SIR?
By default, animations occur from the start and go to the end on each iteration.
However, it is possible to change this behavior so that the animation will instead
take an alternative direction: The first iteration will go forward from 0% to 100%,
the second iteration will travel smoothly back from 100% to 0%, the third iteration
will go forward, the fourth will go back, and so on. This can be done by including
the following line on the element to be animated:
animation-direction: alternate;
