title: animation delay not working
body: <p>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.</p>
  
  <p>Please help me out to get to right track..</p>
  
  <p>Here is my code..</p>
  
  <pre><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;}
  }
  </code></pre>
  
  <p>Here is the link on <a href="http://jsfiddle.net/robcabrera/wXdbL/" rel="noreferrer">Fiddle</a></p>
  
  <p>Thank You for everything!</p>
  
  <p>EDIT ONE:</p>
  
  <p>After changing the order of the animation properties, and adding the opacity:0 in the text, I got the following</p>
  
  <pre><code>#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;}
  }
  </code></pre>
  
  <p>But if I leave the opacity to 0 in the #text, the text will disappear once the animation is over.</p>
  
  <p>How can I keep the text visible after the animation is done??</p>
  
  <p>Thank you!</p>