Why can't I change position with a CSS animation

Why can't I change position with a CSS animation

I had an idea to create an animation where all the words of a tagline
would start squashed on top of each other at the right and then slide left
into position.
I wrapped each word in the tagline in a span tag and gave it a class of
"slide". I then styled slide like this:
.slide {
right: 0;
animation: slide 5s;
-webkit-animation: slide 5s;
}
And then made the animation like so:
@keyframes slide {
0% {position: absolute;}
100% {position: static;}
}
@-webkit-keyframes slide {
0% {position: absolute;}
100% {position: static;}
}
I don't understand why this doesn't work. With position: absolute they
should squash right (I have position relative on the containing div, and
they do squash right when I style it that way, no animation). Then
returning to position: static should make them sit normally. For some
reason, there's no animation taking place. Any ideas?