3

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?

2 Respostas 2

2

no seu caso, todas as animações tem a mesma duração, o que vai mudar é apenas o delay, então altere o seguinte trecho:

* {
  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>

o valor em segundos antes de linear é o tempo da animação, o valor após linear é o tempo de espera para iniciar a animação.

note que defini o valor inicial do left em .um, .dois, .tres para ser o mesmo do @keyframes em 0%.

1

Achei mais fácil, ao invés de usar calc(), usar delay. Mas obrigado!

* {
   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;}
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .