CSS animation delay and position issue

HTML & CSS
1

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?

2

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: transla[B]teY(-1142px)[/B];
	}
 
	100% {
		-webkit-transform: translateY(0);
	}
}
#info {
	position: absolute;
	top: 0;
	[B]-webkit-animation: 3s ease;[/B]
	-webkit-animation-name: fadeInDown;
[B]/*	-webkit-animation-delay: 1s;*/[/B]
3

That’s a crafty solution!

It works great, thanks Paul