title: Letter-by-letter text appearance animation with CSS
body: <p>I have a <code>&lt;div&gt;</code> with text.</p>
  
  <pre>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </pre>
  
  <p>I'd like the text in this <code>&lt;div&gt;</code> to appear on page one character at a time:</p>
  
  <pre>
  L
  
  Lo
  
  Lor
  
  ... and so on, until the full text is visible
  </pre>
  
  <p>Acceptable alternative: do that one word at a time, to avoid problems with HTML entities and jumpy words due to soft hyphenation.</p>
  
  <p>If user clicks on the <code>&lt;div&gt;</code>, it should cancel the animation and display the full text instantly.</p>
  
  <p>In short, I want to imitate an animation that is frequently seen in Japanese-style adventure games. (I think that this is sometimes called a typewriter or teletype effect.)  Here is a good example:</p>
  
  <p><a href="http://www.youtube.com/watch?feature=player_detailpage&amp;v=SasgN0lim7M#t=418">http://www.youtube.com/watch?feature=player_detailpage&amp;v=SasgN0lim7M#t=418</a></p>
  
  <p>Obviously, I can script the animation using JavaScript — just set up a timer and append letters (or words) one-by-one.</p>
  
  <p>But is it possible to do what I need with CSS in modern browsers? (Of course, I'd need to at least change element class in the <code>onclick</code> with JS, but that's OK.)</p>
  
  <p><em>Update:</em> To clarify on characters vs. letters and problems with HTML entities:</p>
  
  <p>My text is littered with the HTML:</p>
  
  <pre><code>Lo&amp;shy;rem &lt;i&gt;ip&amp;shy;sum&lt;/i&gt;.
  </code></pre>
  
  <p>Naïve approach with appending text to the <code>innerHTML</code> character-by-character wouldn't work:</p>
  
  <pre>
  L
  
  Lo
  
  Lo&
  
  ...Doh!
  </pre>