Fade in div one after another with delay

Question

I want to do something like this

the images should fade in from the right and scale into 100% then fade out into right and vice versa

and that's my code

the problem is when the second .spinner fade in it behave different than the first one and when it reaches 75% of the transition it go out of the .row

also the third one is appearing on the next line , i tried display:inline and it doesn't work

any help please ?

PS: Forget about the red buttons , also the transition is working good for ONE .spinner

Answer 1

You want all your elements to share the same movement.

So, the initial position for them must be the same. If you use elements in flow, this won't happen. Position them absolutely:

.spinner {
    position: absolute;
    left: 500px;
}

I have laso removed a lot of prefixes that are no longer necessary, and added some z-index changes. This is not perfect, you will need to work on it a little...

fiddle