CSS3 Animation: Can't get my span to slide up - css

Question

Try to do what should be a basic text animation. I have an H1 with three words. Each one has a span with a class in it. That way each word can animate individually.
The second and third are supposed to fade in, and that works, but the first is supposed to slide up and no matter what settings I create in my CSS, it only fades.
So the H1 looks something like this:
<h1><span class="word-one">Word One</span> <span class="word-two">Word Two</span> <span class="word-three">Word Three</span></h1>
And the CSS looks like this:
.word-one { bottom: -200px; animation: slideIn 1s ease-in-out forwards; }
#keyframes slideIn {
100% {
opacity: 0;
}
100% {
bottom: 0;
opacity: 1;
}
}
So why can't I get the text to slide up?

Answer 1

With your code a quick solution can be something like that:
h1 {width: 600px; position: relative;} /* add position so the span will be part of the the header */
h1 span:nth-child(2) {padding-left: 180px;} /* make place for the first word */
.word-one { bottom: -200px; animation: slideIn 1s ease-in-out forwards; position: absolute; } /* added position so the bottom attribute would work */
#keyframes slideIn {
100% {
opacity: 0;
}
100% {
bottom: 0;
opacity: 1;
}
}
<h1><span class="word-one">Word One</span> <span class="word-two">Word Two</span> <span class="word-three">Word Three</span></h1>

Answer 2

I am not seeing anything in your posted code to try and make it slide up, as the CSS makes it fade in/out. I believe there are some JQuery functions to make an element slide up/down if you would like to look into those though. You can also possibly use the position attribute or even margin to do this in pure CSS. The reason that the current code you have posted isn't working though, is because you have 100% for both entries in #keyframes slideIn. To fix this, simply change the top one to 0% like so:
#keyframes slideIn {
0% {
opacity: 0;
}
100% {
bottom: 0;
opacity: 1;
}
}

Answer 3

The problem is that you are using <span>.
<span> by default are display: inline which means it wont respect top/bottom margins. You need to use divs and use float: left. Then use padding-top to keep word-one at the bottom and then animate to top by giving padding-top: 0
Here is your solution.
.word-one {
padding-top: 200px;
animation: slideIn 1s ease-in-out forwards;
}
.word-one, .word-two, .word-three {
float: left;
}
#keyframes slideIn {
0% {
opacity: 0;
}
100% {
padding-top: 0;
opacity: 1;
}
}
<h1>
<div class="word-one">Word One</div>
<div class="word-two">Word Two</div>
<div class="word-three">Word Three</div>
</h1>