[backa]

I've created a heading with two animations - one repeats once and fades the text in, the second one changes the text's shadow opacity and repeats infinitely.

Problem one is since i put the animation in, the page itself now loads halfway down instead of at the top like normal. i think maybe it's the way i'm positioning the heading? i've tried relative, and leaving position out altogther but it didn't change anything.

Two, i'm including both these animations in one ID - is this okay to do? When I first made it, it would do the fade and then the shadow, but now it seems to ignore the fade. could be related to first problem, i don't know.

example code of how I'm animating:
html

<h1 id="posw">W</h1>

css

h1{     position: absolute;
	float: left;
	font-family: 'BenthamRegular';
	text-align: center;
	font-size: 54px;
	color: #fafefe;	
}
#posw{ position: relative;
	top: 0px;
	left: 77px;
	-moz-animation: fadein 2s linear 1;
	-webkit-animation: fadein 9s linear 1;
	-ms-animation: fadein 9s linear 1;
	-o-animation: fadein 9s linear 1;
	animation: fadein 9s linear 1;

	-moz-animation: shadow 3s linear infinite;
	-webkit-animation: shadow 3s linear infinite;
	-ms-animation: shadow 3s linear infinite;
	-o-animation: shadow 3s linear infinite;
	animation: shadow 3s linear infinite;

}

@-moz-keyframes fadein {
	from { opacity: 0; }
	to { opacity: 1; }
}
@-webkit-keyframes fadein {
	from { opacity: 0; }
	to { opacity: 1; }
}
@-ms-keyframes fadein {
	from { opacity: 0; }
	to { opacity: 1; }
}
@-o-keyframes fadein {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes fadein {
	from { opacity: 0; }
	to { opacity: 1; }
}
@-moz-keyframes shadow {
	from { 	text-shadow: 0px 0px 6px rgba(255,255,255,0.2); }
	50% { text-shadow: 0px 0px 6px rgba(255,255,255,1); }
	to { text-shadow: 0px 0px 6px rgba(255,255,255,0.3); }
}
@-webkit-keyframes shadow {
	from { 	text-shadow: 0px 0px 6px rgba(255,255,255,0.2); }
	50% { text-shadow: 0px 0px 6px rgba(255,255,255,1); }
	to { text-shadow: 0px 0px 6px rgba(255,255,255,0.3); }
}
@-ms-keyframes shadow {
	from { 	text-shadow: 0px 0px 6px rgba(255,255,255,0.2); }
	50% { text-shadow: 0px 0px 6px rgba(255,255,255,1); }
	to { text-shadow: 0px 0px 6px rgba(255,255,255,0.3); }
}
@-o-keyframes shadow {
	from { 	text-shadow: 0px 0px 6px rgba(255,255,255,0.2); }
	50% { text-shadow: 0px 0px 6px rgba(255,255,255,1); }
	to { text-shadow: 0px 0px 6px rgba(255,255,255,0.3); }
}
@-keyframes shadow {
	from { 	text-shadow: 0px 0px 6px rgba(255,255,255,0.2); }
	50% { text-shadow: 0px 0px 6px rgba(255,255,255,1); }
	to { text-shadow: 0px 0px 6px rgba(255,255,255,0.3); }
}