title: CSS3 disappears after keyframe animation
body: <p>I'm using css3 to animate some text. I'm just trying to fade it in, and then disappear only to do it again a few seconds later (after other animations). The problem i'm having is my text fades in but immediately disappears even though i have the keyframe finish @ opacity:1; Why is my text disappearing? Here's the code:</p>
  
  <pre><code>&lt;style&gt;
  #myArea {
     height:250px;
     width:300px;
     position:relative;
     overflow:hidden;
  }
  
  .text {
    position:absolute;
    z-index:1;
    bottom:20px; 
    left:10px;
    opacity:1;
  
  }
  
  #txt1 {
    animation: txt1-fade 1s 1 ease-in;
    animation-delay:1s;
  }
  
  #txt2 {
    -webkit-animation: txt2-fade 5s infinite; /* Chrome, Safari, Opera */
    animation: txt2-fade 5s infinite;
  }
  
  #txt3 {
    -webkit-animation: txt3-fade 5s infinite; /* Chrome, Safari, Opera */
    animation: txt3-fade 5s infinite;
  }
  
  @keyframes txt1-fade {
      0%   {opacity: 0; left:10px;}
      100% {opacity: 1; left:10px;}
  }
  &lt;/style&gt;
  &lt;body&gt;
  &lt;div id="myArea"&gt;
  
  &lt;img src="images/backgrnd.jpg" /&gt;
  
  &lt;div id="txt1" class="text"&gt;
  &lt;img src="images/text1.png" /&gt;
  &lt;/div&gt;
  
  &lt;div id="txt2" class="text"&gt;
  &lt;img src="images/text2.png" /&gt;
  &lt;/div&gt;
  
  &lt;div id="txt3" class="text"&gt;
  &lt;img src="images/text3.png" /&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>