CSS3 Animation-fill-mode property - html

Question

I'm creating an effect where text slides into the window and stays there after the animation ends. I've been able to get the animation to work on 1 piece of the text, but for some reason the 2nd piece is not working.
Please see my fiddle https://jsfiddle.net/9fpryou8/
Thanks in advance.
figure h2.world {
position: absolute;
top: 20%;
left: 61%;
background-color: transparent;
font-size: 7em;
color: white;
font-family: Paytone One, Verdana, sans-serif;
transform: translateX(300%);
text-shadow: 0px 0px 50px black;
-moz-animation-name: slideWorld;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 0.4s;
-moz-animation-delay: 1.4s;
-moz-animation-fill-mode: forwards;
-webkit-animation-name: slideWorld;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 0.4s;
-webkit-animation-delay: 1.4s;
-webkit-animation-fill-mode: forwards;
animation-name: slideWorld;
animation-iteration-count: 1.4;
animation-timing-function: ease-in;
animation-duration: 0.4s;
animation-delay: 1.4s;
animation-fill-mode: forwards;
}

Answer 1

In .world, replace
animation-iteration-count: 1.4;
with
animation-iteration-count: 1;
figure {
height: 98vh;
background-color: grey;
}
figure h2.hello {
position: absolute;
top: 20%;
left: 39%;
font-size: 1em;
background-color: transparent;
color: white;
font-family: Paytone One, Verdana, sans-serif;
transform: translateX(-400%);
text-shadow: 0px 0px 50px black;
-moz-animation-name: slideHello;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 0.4s;
-moz-animation-delay: 1s;
-moz-animation-fill-mode: forwards;
-webkit-animation-name: slideHello;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 0.4s;
-webkit-animation-delay: 1s;
-webkit-animation-fill-mode: forwards;
animation-name: slideHello;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 0.4s;
animation-delay: 1s;
animation-fill-mode: forwards;
}
figure h2.world {
position: absolute;
top: 20%;
left: 61%;
background-color: transparent;
font-size: 1em;
color: white;
font-family: Paytone One, Verdana, sans-serif;
transform: translateX(300%);
text-shadow: 0px 0px 50px black;
-moz-animation-name: slideWorld;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 0.4s;
-moz-animation-delay: 1.4s;
-moz-animation-fill-mode: forwards;
-webkit-animation-name: slideWorld;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 0.4s;
-webkit-animation-delay: 1.4s;
-webkit-animation-fill-mode: forwards;
animation-name: slideWorld;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 0.4s;
animation-delay: 1.4s;
animation-fill-mode: forwards;
}
/**** Display Hello on Load ****/
#-moz-keyframes slideHello {
to {
-moz-transform: translateX(-39%);
}
}
#-webkit-keyframes slideHello {
to {
-webkit-transform: translateX(-39%);
}
}
#keyframes slideHello {
to {
transform: translateX(-39%);
}
}
/**** Display World on Load ****/
#-moz-keyframes slideWorld {
to {
-moz-transform: translateX(-61%);
}
}
#-webkit-keyframes slideWorld {
to {
-webkit-transform: translateX(-61%);
}
}
#keyframes slideWorld {
to {
transform: translateX(-61%);
}
}
<figure>
<h2 class="hello">Hello</h2>
<h2 class="world">World</h2>
</figure
Or simple delete it: the initial value of animation-iteration-count is 1.

Answer 2

you have a typing mistake
change animation-iteration-count: 1.4; to animation-iteration-count: 1;
then it should work