HTML and CSS Reference
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:
Start with animation-name. Each animation is applied to its appropriate
ruleset by name.
Add animation-duration. Each animation must have a duration set on it
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
Add animation-delay. An animation delay is set for each rule so the pieces
of text whoosh in at different times, not all together.
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.