title: Animated text gets hidden after completion of the animation
body: <p>I had tried a simple animation. See <a href="https://jsfiddle.net/dtcec301/" rel="nofollow">this fiddle</a>.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="special_sec"&gt;
    &lt;span class="sub_heading"&gt;About Us&lt;/span&gt;
    &lt;span class="sub_heading1"&gt;Services&lt;/span&gt;
    &lt;span class="sub_heading2"&gt;Portfolio&lt;/span&gt;
    &lt;span class="sub_heading3"&gt;Clients&lt;/span&gt;
    &lt;span class="sub_heading4"&gt;Contact Us&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.special_sec span { 
    font-size:30px; 
    list-style:none; 
    text-align:center; 
    padding:10px 0; 
    display:block; 
    animation:subheadinganimation 17s; 
    color: transparent;
  }
  </code></pre>
  
  <p>In my CSS (<code>.special_sec span</code>), I have added <code>color: transparent</code>. </p>
  
  <p><strong>My problem is:</strong></p>
  
  <ol>
  <li>If <code>color</code> is transparent, after the animation all the text are getting hidden. See my fiddle.</li>
  <li>If I remove this <code>color</code> property, all the text are initially visible. Then the animation also runs. See <a href="https://jsfiddle.net/dtcec301/1/" rel="nofollow">this fiddle</a>.</li>
  </ol>
  
  <p>I want the text to be visible only after the delay timings that I have given. I can't understand the problem. What is the issue? How can I fix this?</p>