Sync CSS Animation - Two Objects in a Row

Asked

Viewed 86 times

1

inserir a descrição da imagem aqui

Look at this image above. I’m trying to get these two objects to start from the right and go to the left until they disappear from the screen.

I want one to stay behind the other, without knocking, without overlapping and I can’t.

Code below:

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

It has to be an infinite animation.

css animation

  • you can use percentage in Translate (translateX(10%)) increasing up to 100%

  • I have. To start when I use translateX(100%) he’s not totally on the right...

1 answer

1


I used absolute positions in the elements and margin-left to move them.

used the same animation, but in one of the elements I played a delay to start.

see if it helps

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

  • Old man, I’ll use your code after lunch to see if it’ll work. But I asked right to left. You won’t get the best answer so.

  • 1

    Diego, I edited the fiddle there going right to left

  • 1

    It worked. And I still made some modifications to fit what I need. = D =D =D =D =D =D =D =D =D WOIEOWIEOWIEOWIOEIW BRBR

Browser other questions tagged css animation

You are not signed in. Login or sign up in order to post.