HTML and CSS Reference
In-Depth Information
I used shorthand here, so let's run through each value to make sure all is clear
and you know what's going on. In each case:
1.
Start with animation-name.
Each animation is applied to its appropriate
ruleset by name.
2.
Add animation-duration.
Each animation must have a duration set on it
to work.
3.
Add animation-iteration-count.
Each animation occurs only once, so
you don't need to add this in, but I included it to make the code completely
obvious.
4.
Add animation-delay.
An animation delay is set for each rule so the pieces
of text whoosh in at different times, not all together.
5.
Add animation-fill-mode.
This is set to
backwards
for all animations, which
means that the animated elements take on the styling defined in their
from
keyframes during the animation delay in each case, and then the animation
starts. If you didn't include this, the animation would sit in its default posi-
tion in each case before being animated from the
from
position and ending
up back in the
to
position, which is the same as the default. This would
look terrible. Try removing the
backwards
keywords and refreshing the
example if you want to see the difference.
TIP:
When creating animated effects where you are animating
elements from outside their container onto it, you'll usually want
to set
overflow: hidden;
on the containing element, so the moving
elements slide into view when they move into it.
