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.