CSS fade and then display:none ?

Hi

I’m trying to ad a display:none after a fade with animation, but can’t figure out how to do it ?

This is my CSS:

/*** Changes saved ***/
div#message p {
	font-size: 12px;
	display: block;
	padding: 10px 15px;

	animation:signup-response 0.5s 1;
	-webkit-animation:signup-response 0.5s 1;
	animation-fill-mode: forwards;

	animation-delay:2s;
	-webkit-animation-delay:1s; /* Safari and Chrome */
	-webkit-animation-fill-mode: forwards;

} 

@keyframes signup-response{
	from {opacity :1;}
	to {opacity :0;}
}

@-webkit-keyframes signup-response{
	from {opacity :1;}
	to {opacity :0;}
}

It is a message displayed in a theme after update on a member page, the fading works just perfect, but the space taking up by the block is still occupied including the padding, i need it to go away, so i need to execute a display:none after the fade, but can’t get a timer on it.

Or is there an easier way with some box CSS3 tricks ?

It has to fade away by itself after a few seconds, and it gets activated when the member clicks the save button, so i guess toggle is out of the question ?

All the best
Carsten