Slide animation elements one at a time? - css

Question

I'm trying to slide a few elements one after the other on the page.
Basically, I need to slide the first element in, and then the second after and then the third one etc etc.
Something like this:
This is what i have so far:
https://jsfiddle.net/npvsrkcy/3/
In the fiddle above, all the elements/images will slide in all at the same time which is not what i am looking for.
This is my entire code:
img {
position: relative;
margin-left: 0%;
margin: 1em;
animation: slide 4s 1;
width:100%;
}
#keyframes slide {
from { right: -150%; }
to { right: 0%; }
}
Could someone please advise on this?
EDIT:
Ok, since I'm trying to use the slide animation on dynamically created elements, I can't use the normal nth-child~(number) scenario.
So I tried to do this:
img:nth-child(1n+3) {
-webkit-animation-delay: 0;
animation-delay: 0;
}
img:nth-child(2n+2) {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
img:nth-child(3n+3) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
but that seems to only work for the first 3 elements/images!
This is the new fiddle: https://jsfiddle.net/npvsrkcy/9/

Answer 1

You might try to leverage the nth-child(number) selector to delay the animation, like so:
img {
position: relative;
margin-left: 0%;
margin: 1em;
animation: slide 4s 1;
width:100%;
/* Fix the elements being visible before the animation */
opacity: 0;
/* After the animation remain visible */
-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
animation-fill-mode: forwards;
}
img:nth-child(1) {
-webkit-animation-delay: 0;
animation-delay: 0;
}
img:nth-child(2) {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
img:nth-child(3) {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
#keyframes slide {
from { right: -150%; opacity: 0;}
to { right: 0%; opacity: 1; }
}
This would delay the animation of the second and third image element by the set amount of seconds.
Hope it helps!
Edit: just played with the fiddle, and it seems that an edit to the animation would be desirable to prevent them from showing before loading. Allow me to come up with a fix;
Edit 2: Fixed it by setting the animation-fill-mode to forwards and added an opacity effect. Another solution would be to place the image off-screen to starty with.
PS. Some further info:
https://www.w3schools.com/cssref/sel_nth-child.asp

Answer 2

you can try this :
img {
position: relative;
margin-left: 0%;
margin: 1em;
animation: Aslide 4s 1;
width:100%;
}
img + img {
animation: Bslide 4s 1;
}
img + img + img {
animation: Cslide 4s 1;
}
#keyframes Aslide {
0% { right: -150%; }
33.333333% { right: 0%; }
66.666666% { right: 0%;}
100% { right: 0%;}
}
#keyframes Bslide {
0 { right: -150%; }
33.333333% { right: -150%; }
66.666666% { right: 0%;}
100% { right: 0%;}
}
#keyframes Cslide {
0% { right: -150%; }
33.333333% { right: -150%; }
66.666666% { right: -150%; }
100% { right: 0%;}
}

Answer 3

Delay the animation for each div (and)
Add a fill-mode and set right value to -150% for img tag by default
img {
position: relative;
margin-left: 0%;
margin: 1em;
animation: slide 4s 1 forwards;
width:100%;
right: -150%;
}
img:nth-child(1) {
animation-delay:0s;
}
img:nth-child(2) {
animation-delay:1s;
}
img:nth-child(3) {
animation-delay:2s;
}
#keyframes slide {
from { right: -150%; }
to { right: 0%; }
}