Para não causar confusão no tópico Div's aparecendo e correndo, resolvi criar outro pois o problema agora mudou.
Tenho o 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>
Mas estou tendo dificuldades com a lógica de efeito. Pelo meu @keyframe, em 50% dos efeitos, as 3 div's se encontrarão. Gostaria que a cor de fundo trocasse em 50% mas as div's não devem se encontrar, senão seus conteúdos, nesse instante, ficarão uma bagunça.
A idéia é a primeira div sai da direita correndo até a esquerda na sua posição 0px, daí 1 segundo apos sai a div dois e faz o mesmo até chegar na sua posição 300px e, analogamente, a div 3 até 600px.
Onde estou errando?