CODEWITHSUNDEEP
javascripthtmlcss
Janath
Janath

Reputation: 1248

css animation across the screen and return

I just want to move my element across the screen and return the the starting point. It's a position absolute element. The parent wrapper is wider 100%

I tried this way using keyframes

.wrapper{
  position: absolute;
  width: 100%;
}

.moving-van{
  position: absolute;
  width: 100px;
  z-index: 10;
  left: 18%;
  animation: moveBus 9s ease-in-out forwards;
}

@keyframes moveBus{
  0% {
  transform: translateX(0);
  }
  100% {
  transform: translateX(100%);
  }
}
<div class="wrapper">
  <div class="moving-van">
    <img src="https://image.ibb.co/dGA6Yo/tires_1.jpg">
  </div>
</div>

But I have no clue how it will move to across screen and come start point. Any idea?

Upvotes: 2

Views: 1781

Answers (2)

Max Sinev
Max Sinev

Reputation: 6034

If "come start point" means appearing from another window edge so here is an example:

html, body {
   margin: 0;
   padding: 0;
   overflow: hidden;
}

.wrapper{
  position: absolute;
  width: 100%;
}

.moving-van{
  position: absolute;
  width: 100px;
  z-index: 10;
  left: 18%;
  animation: moveBus 9s ease-in-out forwards;
}

.moving-van2{
  position: absolute;
  width: 100px;
  z-index: 10;
  left: -10%;
  animation: moveBus2 4s ease-in-out 5.5s forwards;
}

@keyframes moveBus{
  0% {
  left: 18%;
  }
  100% {
  left: 110%;
  }
}

@keyframes moveBus2{
  0% {
  left: -10%;
  }
  100% {
  left: 18%;
  }
}
<div class="wrapper">
  <div class="moving-van">
    <img src="https://image.ibb.co/dGA6Yo/tires_1.jpg">
  </div>
  <div class="moving-van2">
    <img src="https://image.ibb.co/dGA6Yo/tires_1.jpg">
  </div>
</div>

Upvotes: 3

Jagjeet Singh
Jagjeet Singh

Reputation: 1572

You can do like this using transform or left: 

.wrapper{
  position: absolute;
  width: 100%;
}

.moving-van{
  position: absolute;
  width: 100px;
  z-index: 10;
  left: 18%;
  animation: moveBus 9s ease-in-out forwards;
}

@keyframes moveBus{
  0% { 
   transform: translateX(0);
   //left: 0;
  }
  50% {
   transform: translateX(100%);
   //left : 100%;
  }
  100% {
   transform: translateX(0%);
   //left: 0;
  }
}
<div class="wrapper">
  <div class="moving-van">
    <img src="https://image.ibb.co/dGA6Yo/tires_1.jpg">
  </div>
</div>

Upvotes: 0

Related Questions