animation wont work on <span> - html

Question

So I am trying to animate the #txtName class and it's working fine. My problem is the .smallletters is set as <span> property inside the <h1> and I can't make it to start animating outside of the page just like The #txtName doing. It means When I refresh I already see the .smallletters and then the #txtName is coming and pushing .smallletters down.
#txtName {
font-size: 80px;
color: #ff6666;
text-transform: uppercase;
letter-spacing: 0.2em;
position: relative;
top: 300px;
animation-name: First;
animation-duration: 4s;
}
#keyframes First {
0% {
top: 10px;
}
50% {
top: 400px;
}
100% {
top: 300px;
}
}
.smallletters {
font-size: 40px;
letter-spacing: 0.5em;
display: inline;
animation-name: second;
animation-duration: 4s;
}
#keyframes Second {
0% {
top: 0px;
}
100% {
top: 300px;
}
}
<header id="main-header">
<h1 id="txtName">Oded Menashe<span class="smallletters">Hair Styling</span></h1>
</header>

Answer 1

You can only animate top of positioned elements, so position your smallletters. Also your animation is Second (note the capital s)
#txtName {
font-size: 80px;
color: #ff6666;
text-transform: uppercase;
letter-spacing: 0.2em;
position: relative;
top: 300px;
animation-name: First;
animation-duration: 4s;
}
#keyframes First {
0% {
top: 10px;
}
50% {
top: 400px;
}
100% {
top: 300px;
}
}
.smallletters {
font-size: 40px;
letter-spacing: 0.5em;
display: inline;
animation-name: Second;
animation-duration: 4s;
position: relative;
}
#keyframes Second {
0% {
top: 0px;
}
100% {
top: 300px;
}
}
<header id="main-header">
<h1 id="txtName">Oded Menashe<span class="smallletters">Hair Styling</span></h1>
</header>

Answer 2

Not sure what you want exactly, but you should change two or three things, depending on what you really want:
1.) Identical spelling of animation name ("second" vs. "Second"), 2.) position: relative for the span, 3.) display: inline-block for the span
#txtName {
font-size: 80px;
color: #ff6666;
text-transform: uppercase;
letter-spacing: 0.2em;
position: relative;
top: 300px;
animation-name: First;
animation-duration: 4s;
}
#keyframes First {
0% {
top: 10px;
}
50% {
top: 400px;
}
100% {
top: 300px;
}
}
.smallletters {
font-size: 40px;
letter-spacing: 0.5em;
display: inline;
position: relative;
animation-name: second;
animation-duration: 4s;
}
#keyframes second {
0% {
top: 0px;
}
100% {
top: 300px;
}
}
<header id="main-header">
<h1 id="txtName">Oded Menashe<span class="smallletters">Hair Styling</span></h1>
</header>

Answer 3

span tags are display: inline by default, and so will ignore positional instructions (margin, top, left etc).
Give it display: block or inline-block if you want to apply (or animate) these properties.