Help with @keyframe effect

Navigation
3

In order not to cause confusion in the topic Div's appearing and running , I decided to create another 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 difficulty with logic of effect. 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 be found, otherwise their contents, in that instant, will be a mess.

The idea is the first div leaves the right running to the left in its 0px position, hence 1 second after exits the two div and does the same until it reaches its 300px position and, similarly, the div 3 up to 600px

Where am I going wrong?

    
asked by anonymous 01.03.2016 / 13:01

2 answers

2

In your case, all the animations have the same duration, what will change is just the delay, so 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 wait time to start the animation.

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

    
01.03.2016 / 14:04
1

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;}
}
    
01.03.2016 / 16:05
Function to draw a rectangle in Console in C How to leave an AlertDialog with rounded edges?