Animating using CSS instead of a gif with looping
<p>I just want to basically show text and hide, then next text and hide, then last text and hide and repeat. How can I do this? I've been looking at code but I'm still lost. Any help is greatly appreciated! </p>

<p>My Code :</p>

<pre><code>&lt;style&gt;
  #myArea {
    height:250px;
    width:300px;
    position:relative;
  }

  .text {
    position:absolute;
    z-index:1;
    bottom:20px; 
    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>