Text Animation Problem

[rewind]

I'm trying to create a text animation that simply slides text along to a certain point. the trouble i'm having is the text must start off invisible when the page loads, then become visible for the animation, and remain visible afterwards. Ive tried using opacity and z-index to hide the text but I cant get it right. Is there another way? Please can someone assist?

 

So it's basically like this in code:

 

html

<h1 id="move1">Moving text</h1>

 

css

h1 { text-align: center;
font-size: 54px;
color: black;
text-shadow: 0px 0px 6px rgba(255,255,255,0.6);
}
#move1 {
left: 0;
top: 0;
-moz-animation: move1 1s ease-out 2s 1;
-webkit-animation: move1 1s ease-out 2s 1;
-ms-animation: move1 1s ease-out 2s 1;
-o-animation: move1 1s ease-out 2s 1;
animation: move1 1s ease-out 2s 1;
}
@-moz-keyframes move1 {
0% {left:-80px; }
20% { left: -60px;}
60% { left: -20px; }
100% { left: 0px; }
}
@-webkit-keyframes move1 {
0% { left:-80px; }
20% { left: -60px;}
60% { left: -20px; }
100% { left: 0px; }
}
@-o-keyframes move1 {
0% { left:-80px; }
20% { left: -60px;}
60% { left: -20px; }
100% { left: 0px; }
}
@-ms-keyframes move1 {
0% { left:-80px; }
20% { left: -60px;}
60% { left: -20px; }
100% { left: 0px; }
}

[rewind]

nm, sorted it