Hi all,

I have created an info bar that slides in from the top of the page (out of view - the same as on here). It works great but when I put a delay on it, the original start position is in view. So it appears until the animation starts. This makes total sense I just can't fathom how to get around it! I know it will be something simple.

(I have removed all other browser prefixes for simplicity)

Code CSS:
@-webkit-keyframes fadeInDown {
	0% {
		-webkit-transform: translateY(-42px);
	100% {
		-webkit-transform: translateY(0);
#info {
	position: absolute;
	top: 0;
	-webkit-animation: 1s ease;
	-webkit-animation-name: fadeInDown;
	-webkit-animation-delay: 1s;

Any ideas?