Skip to main content
adicionou 38 caracteres ao conteúdo
Fonte Link
Diego Souza
  • 16,7mil
  • 4
  • 36
  • 104

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.

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);
  }
}

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.

Fonte Link
Diego Souza
  • 16,7mil
  • 4
  • 36
  • 104

Sincronizar Animação CSS - Dois Objetos Seguidos

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);
  }
}