CSS animations

I want to make the balls change their z-index every turn(I mean every half turns because the back and forth movement is one animation)
image
So here’s the HTML:

<div id="firstL" class="left"></div>
<div id="secondL" class="left"></div>
<div id="thirdL" class="left"></div>
<div id="fourthL" class="left"></div>
<div id="fifthL" class="left"></div>
<div id="sixthL" class="left"></div>
<div id="seventhL" class="left"></div>
<div id="eighthL" class="left"></div>
<div id="firstR" class="right"></div>
<div id="secondR" class="right"></div>
<div id="thirdR" class="right"></div>
<div id="fourthR" class="right"></div>
<div id="fifthR" class="right"></div>
<div id="sixthR" class="right"></div>
<div id="seventhR" class="right"></div>
<div id="eighthR" class="right"></div>

Here’s the CSS:


.left {
  position: relative;
  left: 45%;
  margin-bottom: 5px;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  background-color: red;
  animation: right 4s ease-in-out infinite;
  z-index: 2;
}
.right {
  position: relative;
  left: 55%;
  margin-bottom: 5px;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  background-color: blue;
  top: -280px;
  animation: left 4s ease-in-out infinite;
  z-index: 1;
}
* {
  margin: 0;
  padding: 0;
}
@keyframes right {
  0% {
    left: 45%;
    z-index: 2;
  }
  25% {
    left: 55%;
  }
  50% {
    left: 45%;
    z-index: 1;
  }
  75% {
    left: 55%;
  }
  100% {
    left: 45%;
  }
}
@keyframes left {
  0% {
    left: 55%;
    z-index: 1;
  }
  25% {
    left: 45%;
  }
  50% {
    left: 55%;
    z-index: 2;
  }
  75% {
    left: 45%;
  }
  100% {
    left: 55%;
    z-index: 1;
  }
}

Just in case, here’s the link.
Right now it changes every turn(not the half of the animation, it changes after the balls meet for the second time, the full animation)
On the first run it changes when they(the balls) meet after the animation is complete and it re-runs the same ball is “up” and the other ball should be “down”(z-index)
Any help would be appreciated :grinning:

4 Likes

Sorry, but I’m confused on what you’re saying. They move left and right, so you want it to move up and down then? Is that what you’re trying to say?

4 Likes

No, they move right and left, but every time they meet they should change their z-index property

4 Likes

Ok. That clarifies a thing for me. I may be blind, but I don’t see a moving out property persay. I don’t see a property to move it.

animation: left 4s ease-in-out infinite;

There is that, but it doesn’t seem to connect there. Look at what this person used here as a example that may help you. If it doesn’t help, I’ll try to guide you more.

4 Likes

I don’t have a problem with moving, the problem is that every turn(left and right movement) the balls should change their z-index CSS property so at one turn red is up and in the next turn blue is up(I mean one time red covers blue and in the next move, blue covers red)

4 Likes

Oh. I see now. Right now its two red, then two blue.

I think that and z index 1 needs changed for it work. I put all the z index numbers to 1, and it made blue forever stay on top. I’m working on it, and will get back to you soon.

3 Likes

thank you :grinning: the first works just when hitting run so the problem maybe is at the and of the animation

3 Likes

Your welcome! I trying a way right now that may work besides answering 30+ notifications :slightly_smiling_face:

1 Like