title: How to slide a word in a sentence in HTML
body: <p>Is it possible, using css or Javascript to silde a word in a sentence? I've the below, for sliding text. When the second sentence is shown, the word 'Data' to be then replaced with Process, then Technology, then Formula. Until all the words are shown the next sentence should not be shown.</p>
  
  <p>Tried using <code>setInterval</code>, get the display text from the <code>div</code> using <code>innerText</code>
  and write conditions to remove/re-add class. But, <code>innerText</code> always giving all the text inside the div.</p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div class="tag-slider"&gt;
      &lt;div class="marquee down" id="marquee-down-text"&gt;
          &lt;p&gt;Manage collaborative process&lt;/p&gt;
          &lt;p&gt;Three level security to protect your Data&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.marquee.down p {
      transform:translateY(-100%);
      -moz-transform:translateY(-100%);
      -webkit-transform:translateY(-100%);
  }
  
  .marquee.down p:nth-child(1) {
      animation: down-one 10s ease infinite;
      -moz-animation: down-one 10s ease infinite;
      -webkit-animation: down-one 10s ease infinite;
  }
  
  .marquee.down p:nth-child(2) {
      animation: down-two 10s ease infinite;
      -moz-animation: down-two 10s ease infinite;
      -webkit-animation: down-two 10s ease infinite;
  }
  </code></pre>