How to slide children at different speeds with CSS animation. Can this be done dynamically when # of-CodePudding

I want to slide each of the children of the container element from right to left with the child elements completing the animation in order of top down.(item 1 completes animation then item 2, item3, etc.) How can I do this if the number of children is unknown?

<div >
        <div > item 1</div>
        <div > item 2</div>
        <div > item 3</div>
        <div > item 4</div>
    </div>

I see a lot of guides on sliding from right to left on a single element. However, not seeing a way to slide individual items at various speeds, especially if the number of items is unknown.

CodePudding user response：

If you know the max number of items, you can set animation times for each of the possible elements.

Then you'll need to dynamically add a class to each element. Since the items are dynamically shown, I'm assuming you're using something like map.

items.map((items, itemCount=0)=> {
   //code to append class with itemCount   at end
}

Then in your CSS you can do something like this

.item1 {
  animation: 100ms slide-left;
}

.item2 {
  animation: 200ms slide-left;
}
.item3 {
  animation: 300ms slide-left;
}

@keyframes slide-left {
  from {
    margin-left: 100%;
  }
  to {
    margin-left: 0%;
  }
}

Notice how we can use the same animation and just change the timing on each child element to make it slide faster or slower.

CodePudding user response：

first you will have to give every "child" its own class, you have them listed as the same class. ex. child1, child 2,etc. I have listed code below that I think is what you are asking. There is commented out code that will explain what to do :)

Code:

<!doctype html>
<html>
<head>

    <title>JavaScript and the Canvas</title>
    
    <style>
 /* animate every child*/
 /*add an animation delay for each one so they will start one after the other 
 ex. if one starts at 3s then the next will be delayed by 3s so it starts after it*/
 /*if you want the animation to continue almost on a loop add: animation-iteration-count: infinite;*/

.container {
    background-color: aquamarine;
    height: 500px;
    width: 500px;
}
.child1 {
    color: blue;
    animation-name: move1;
   animation-duration: 3s;
   animation-timing-function: ease-in-out;

}
@keyframes move1 {
 
 0% {
     transform: translate(0);
 }
 50% {
     transform: translate(100px);
 }
 100% {
     transform: translate(450px);
 }
 }

.child2 {
    color: blueviolet;
    animation-name: move2;
   animation-duration: 3s;
   animation-delay: 3s;
   animation-timing-function: ease-in-out;
}
@keyframes move2 {
 
 0% {
     transform: translate(0);
 }
 50% {
     transform: translate(100px);
 }
 100% {
     transform: translate(450px);
 }
 }
.child3 {
    color: brown;
    animation-name: move3;
   animation-duration: 3s;
   animation-delay: 6s;
   animation-timing-function: ease-in-out;
}
@keyframes move3 {
 
 0% {
     transform: translate(0);
 }
 50% {
     transform: translate(100px);
 }
 100% {
     transform: translate(450px);
 }
 }

    </style>
    
</head>
<body>
 <!--give each child in the container a diffrent class, not the same class-->
    <div >
        <div > item 1</div>
        <div > item 2</div>
        <div > item 3</div>
    </div>

</body>
</html>