animation delay not working

animation delay not working

Okay, I have this text that I want to appear after 20s. I am using the
animation-delay property but it is not working. Perhaps, I am doing
something wrong.
Please help me out to get to right track..
Here is my code..
@import url(http://fonts.googleapis.com/css?family=Economica);
#text{
font-family:'Economica', sans-serif;
font-weight:bold;
position:absolute;
left:50%;
top:50%;
margin-left:-20px;
margin-top:-25px;
animation:fade-in 5s;
animation-delay:15s;
-webkit-animation-delay:15s;
-webkit-animation:fade-in 5s;
}
@keyframes fade-in{
from { opacity:0;}
to {opacity:1;}
}
@-webkit-keyframes fade-in{
from {opacity:0;}
to {opacity:1;}
}
Here is the link on Fiddle
Thank You for everything!
EDIT ONE:
After changing the order of the animation properties, and adding the
opacity:0 in the text, I got the following
#text{
font-family:'Economica', sans-serif;
position:absolute;
left:50%;
top:50%;
opacity:0;
margin-left:-20px;
margin-top:-25px;
animation:fade-in 2s;
animation-delay:3s;
-webkit-animation:fade-in 2s;
-webkit-animation-delay:3s;
-o-animation:fade-in 2s;
-o-animation-delay:3s;
}
@keyframes fade-in{
from { opacity:0;}
to {opacity:1;}
}
@-webkit-keyframes fade-in{
from {opacity:0;}
to {opacity:1;}
}
But if I leave the opacity to 0 in the #text, the text will disappear once
the animation is over.
How can I keep the text visible after the animation is done??
Thank you!