CSS animation delay and position issue

[mikeebee8]

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)

@-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?

[Paul O'B]

Hi,

Yuo could probably get the delay effect by moving the element further away and then increase the animation time.

e.g.

@-webkit-keyframes fadeInDown {
	
	0% {
 
		-webkit-transform: translateY(-1142px);
	}
 
	100% {
		-webkit-transform: translateY(0);
	}
}
#info {
	position: absolute;
	top: 0;
	-webkit-animation: 3s ease;
	-webkit-animation-name: fadeInDown;
/*	-webkit-animation-delay: 1s;*/

[mikeebee8]

That's a crafty solution!

It works great, thanks Paul