1

inserir a descrição da imagem aqui

Vejam essa imagem acima. Estou tentando fazer com que esses dois objetos comecem da direita e vão até a esquerda até sumir da tela.

Quero que um fique atrás do outro, sem bater, sem sobrepor e não consigo.

Código abaixo:

img.trator-rodape {
  display: block;
  position: absolute;
  transform: translateX(1980px);
  bottom: 10px;
  width: 20%;
  max-width: 333px;
  animation-name: TratorRodape;
  animation-duration: 45s;
  animation-iteration-count: infinite;
}
img.caminhao {
  display: block;
  position: absolute;
  transform: translateX(2380px);
  bottom: 16px;
  width: 20%;
  max-width: 164px;
  animation-name: CaminhaoRodape;
  animation-duration: 135s;
  animation-iteration-count: infinite;
}
// Trator
@keyframes TratorRodape {
  10% {
    transform: translateX(1500px);
  }
  20% {
    transform: translateX(1000px);
  }
  30% {
    transform: translateX(700px);
  }
  50% {
    transform: translateX(500px);
  }
  70% {
    transform: translateX(300px);
  }
  90% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(-500px);
  }
}
// Caminhão
@keyframes CaminhaoRodape {
  10% {
    transform: translateX(1500px);
  }
  20% {
    transform: translateX(1000px);
  }
  30% {
    transform: translateX(700px);
  }
  50% {
    transform: translateX(500px);
  }
  70% {
    transform: translateX(300px);
  }
  90% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(-200px);
  }
}

Tem que ser uma animação infinita.

2
  • você pode usar porcentagem no translate (translateX(10%)) ir aumentando até 100% Commented 16/09/2015 às 20:43
  • Já usei. Pra começar quando uso translateX(100%) ele não fica totalmente na direita... Commented 16/09/2015 às 20:44

1 Resposta 1

1

usei posições absolutas nos elementos e margin-left para deslocá-los.

usei a mesma animação, mas em um dos elementos eu joguei um delay para iniciar.

vê se é de ajuda

http://jsfiddle.net/iguimaraes/ep7os7cu/

3
  • Velho, eu vou usar seu código depois do almoço para ver se vai funcionar. Mas eu pedi da direita pra esquerda. Não vai levar a melhor resposta por isso. Commented 17/09/2015 às 13:34
  • 1
    Diego, editei o fiddle lá indo da direita pra esquerda Commented 17/09/2015 às 15:09
  • 1
    Deu certo. E ainda fiz umas modificações para se adequar ao que eu preciso. =D =D =D =D =D =D =D =D =D WOIEOWIEOWIEOWIOEIW BRBR Commented 17/09/2015 às 16:19

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 .