Help with @keyframe effect

Question

Not to cause confusion in the topic Div’s coming and going, I decided to create another because the problem has now changed.

I have the html:

* {
  margin: 0 auto;
  padding: 0;
}
body {
  width: 900px;
}
.box {
  position: relative;
  width: 900px;
  height: 250px;
  top:0;
  background-color: #fff;
}

.um, .dois, .tres {
  position: absolute;
  width: 250px;
  height: 250px;
}

.um {
  color: #fff;
  animation: um 1s linear forwards;
  -webkit-animation: um 1s linear forwards; 
}

.dois {
  color: #000;
  animation: dois 2s linear forwards;
  -webkit-animation: dois 2s linear forwards; 
}

.tres {
  color: #fff;
  animation: tres 3s linear forwards;
  -webkit-animation: tres 3s linear forwards; 
}


@keyframes um {
  0% { left: 100%; background-color: teal; }
  50% { left: 150px; background-color: white;}
  100% { left: 0%; background-color: crimson;}
}
@-webkit-keyframes um {
  0% { left: 100%; background-color: teal; }
  50% { left: 150px; background-color: white;}
  100% { left: 0%; background-color: crimson;}
}

@keyframes dois {
  0% { left: 100%; background-color: teal; }
  50% { left: 450px; background-color: white;}
  100% { left: 300px; background-color: crimson;}
}
@-webkit-keyframes dois {
  0% { left: 100%; background-color: teal; }
  50% { left: 450px; background-color: white;}
  100% { left: 300px; background-color: crimson;}
}
@keyframes tres {
  0% { left: 100%; background-color: teal; }
  50% { left: 750px; background-color: white;}
  100% { left: 600px; background-color: crimson;}
}
@-webkit-keyframes tres {
  0% { left: 100%; background-color: teal; }
  50% { left: 750px; background-color: white;}
  100% { left: 600px; background-color: crimson;}
}

<div class="box">
  <div class="um">1</div>
  <div class="dois">2</div>
  <div class="tres">3</div>
</div>

But I’m having trouble with effect logic. By my @keyframe, in 50% of the effects, the 3 div’s will meet. I would like the background color to change by 50% but the div’s should not meet, but their contents, at this moment, will be a mess.

The idea is the first div leaves the right running up to the left at its 0px position, then 1 second after the div two comes out and does the same until it reaches its 300px position and, analogously, the div 3 up to 600px.

Where am I going wrong?

Answer 1

in your case, all animations have the same duration, what will change is only the delay, then change the following excerpt:

* {
  margin: 0 auto;
  padding: 0;
}
body {
  width: 900px;
}
.box {
  position: relative;
  width: 900px;
  height: 250px;
  top:0;
  background-color: #fff;
  overflow: hidden;
}

.um, .dois, .tres {
  position: absolute;
  width: 250px;
  height: 250px;
  left: 100%;  
}

.um {
  color: #fff;
  animation: um 1s linear 0s forwards;
  -webkit-animation: um 1s linear 0s forwards; 
}

.dois {
  color: #000;
  animation: dois 1s linear 1s forwards;
  -webkit-animation: dois 1s linear 1s forwards; 
}

.tres {
  color: #fff;
  animation: tres 1s linear 2s forwards;
  -webkit-animation: tres 1s linear 2s forwards; 
}


@keyframes um {
  0% { left: 100%; background-color: teal; }
  50% { left: calc((100% + 0px) / 2); background-color: white;}
  100% { left: 0px; background-color: crimson;}
}
@-webkit-keyframes um {
  0% { left: 100%; background-color: teal; }
  50% { left: calc((100% + 0px) / 2); background-color: white;}
  100% { left: 0px; background-color: crimson;}
}

@keyframes dois {
  0% { left: 100%; background-color: teal; }
  50% { left: calc((100% + 300px) / 2); background-color: white;}
  100% { left: 300px; background-color: crimson;}
}
@-webkit-keyframes dois {
  0% { left: 100%; background-color: teal; }
  50% { left: calc((100% + 300px) / 2); background-color: white;}
  100% { left: 300px; background-color: crimson;}
}
@keyframes tres {
  0% { left: 100%; background-color: teal; }
  50% { left: calc((100% + 600px) / 2); background-color: white;}
  100% { left: 600px; background-color: crimson;}
}
@-webkit-keyframes tres {
  0% { left: 100%; background-color: teal; }
  50% { left: calc((100% + 600px) / 2); background-color: white;}
  100% { left: 600px; background-color: crimson;}
}

<div class="box">
  <div class="um">1</div>
  <div class="dois">2</div>
  <div class="tres">3</div>
</div>

the value in seconds before linear is the animation time, the value after linear is the waiting time to start the animation.

note that I set the initial value of left in .um, .dois, .tres to be the same as @keyframes in 0%.

Answer 2

I found it easier, instead of using Calc(), to use delay. But thank you!

* {
   margin: 0 auto;
   padding: 0;
 }
 body {
   width: 900px;
 }
.box {
 position: relative;
 width: 900px;
 height: 250px;
 top:0;
 background-color: #fff;
}

.um, .dois, .tres {
 position: absolute;
 width: 250px;
 height: 250px;
}

.um {
 color: #fff;
 animation: um 1s linear forwards;
 -webkit-animation: um 1s linear forwards; 
 animation-delay: 0s;
}

.dois {
 color: #000;
 animation: dois 2s linear forwards;
 -webkit-animation: dois 2s linear forwards; 
 animation-delay: 1s;
}

.tres {
 animation-delay: 10s;
 color: #fff;
 animation: tres 3s linear forwards;
 -webkit-animation: tres 3s linear forwards; 
 animation-delay: 2s;
}


@keyframes um {
  0% { left: 100%; background-color: teal; }
  50% { left: 150px; background-color: white;}
  100% { left: 0%; background-color: crimson;}
}
@-webkit-keyframes um {
  0% { left: 100%; background-color: teal; }
  50% { left: 150px; background-color: white;}
  100% { left: 0%; background-color: crimson;}
}

@keyframes dois {
  0% { left: 100%; background-color: teal; }
  50% { left: 450px; background-color: white;}
  100% { left: 300px; background-color: crimson;}
}
@-webkit-keyframes dois {
  0% { left: 100%; background-color: teal; }
  50% { left: 450px; background-color: white;}
  100% { left: 300px; background-color: crimson;}
}
@keyframes tres {
  0% { left: 100%; background-color: teal; }
  50% { left: 750px; background-color: white;}
  100% { left: 600px; background-color: crimson;}
}
@-webkit-keyframes tres {
  0% { left: 100%; background-color: teal; }
  50% { left: 750px; background-color: white;}
  100% { left: 600px; background-color: crimson;}
}