I am working on a cool effect where text slides into the window and remains in place after the animation is complete. Surprisingly, I have managed to get the animation to work on one part of the text, but for some reason, the second part is not cooperating.
Feel free to check out my code snippet on https://jsfiddle.net/9fpryou8/
Thank you 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;
}