title: How to Fade In/Out multiple texts using CSS/jQuery like on Droplr?
body: <p>I've seen this type of animation on a website just when CSS3 key-frames started to gain momentum, but couldn't find it nor could I replicate it using CSS or jQuery, and here's where I thought some of you could help.</p>
  
  <p>I've animated what I hope to achieve and I've embedded it below. I believe this can be coded using the new CSS3 key-frames or jQuery's .animate(); feature. I don't know. I've tried everything I know, but all in vain.</p>
  
  <p>Here's the GIF animation of what I wanted:</p>
  
  <p><img src="https://i.stack.imgur.com/aKiOo.gif" alt="GIF animation where the text &quot;I am&quot; is static and the word &quot;invincible&quot; fades out, the word &quot;awesome&quot; fades in, the word &quot;awesome&quot; fades back out, and the word &quot;invincible&quot; fades back in, in an infinite loop."></p>
  
  <p>I just noticed, <a href="http://droplr.com/" rel="noreferrer">http://droplr.com/</a> uses a very similar transition on their home page, but with a few sliding effects. And the data (words) that come up are all random, all the time. I'd like to know how that is possible!</p>