title: how to write css animation for text typing?
body: <pre><code>&lt;sytle&gt;
  .typing{
  display: inline-block;
  width: 100%;
  white-space:nowrap;
  overflow:hidden;
  -webkit-animation: type 2s steps(50, end) alternate;
  animation: type 2s steps(50, end) alternate;
  -webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
  animation-iteration-count: infinite;
  }
  @keyframes type{
  from { width: 0; }
  }
  @-webkit-keyframes type{
  from { width: 0;  }
  }
  &lt;style&gt;
  &lt;div id="top" class="header"&gt;
  &lt;div class="text-center"&gt;
      &lt;h1 class="typing"  &gt;
  &lt;b&gt;Find anything for your Business Instantly&lt;/b&gt;
  &lt;b&gt;Source &gt;&gt; Supply &gt;&gt; Grow your Business Online&lt;/b&gt;
  &lt;b&gt;Create your Home &amp;amp; Global website online&lt;/b&gt;
      &lt;/h1&gt;        
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>i have 3 bold tags which is in h1 tag, here it should display in one line, As one after another  bold tag as shown in the link <a href="http://www.indiamart.com/" rel="nofollow">see this link   : </a><a href="http://www.indiamart.com/" rel="nofollow">http://www.indiamart.com/</a></p>
  
  <p>Please can anyone help me. </p>