title: Fade in div one after another with delay
body: <p>I want to do something like this
  <img src="https://i.stack.imgur.com/IVewe.png" alt="this" /></p>
  <p>the images should fade in from the right and scale into 100% then fade out into right and vice versa</p>
  <p>and that's my <a href="http://jsfiddle.net/uy60jxed/" rel="nofollow noreferrer">code</a></p>
  <p>the problem is when the second <code>.spinner</code> fade in it behave different than the first one and when it reaches 75% of the transition it go out of the <code>.row</code></p>
  <p>also the third one is appearing on the next line , i tried <code>display:inline</code>  and it doesn't work</p>
  <p>any help please ?</p>
  <p><strong>PS:</strong> Forget about the red buttons , also the transition is working good for ONE <code>.spinner</code></p>