CODEWITHSUNDEEP
javascripthtmlcsscss-animations
SkyKOG
SkyKOG

Reputation: 287

CSS linear animation across screen

I have a car which im moving to the right of the screen. (the car needs to start from left infinity and go out of the screen on the right).

But the animation repeats just once and stops.

<div class="car-right">
   <img class="car-right-image"src="/assets/car-right.png" alt="">
</div>

.car-right {
  position: absolute;
  top: 86%;
  left: -200px;
  z-index: 10;
}
.transit-right {
  -webkit-transform: translate(1920px,0);
  -webkit-transition: all 30s ease-in-out;
  transition: all 30s ease-in-out;
  z-index: 10;
}

$(function() {
  return $('.car-right-image').addClass("transit-right");
});

What am i doing wrong here ? ... how do i make the car keep coming from the left infinity and dissapear to the right ? ...

I know i gotta do something with keyframes and the infinite atrribute.

But cant seem to get it ...

Any help is highly appreciated, thanks.

Regards -Skykog

Upvotes: 0

Views: 6295

Answers (2)

Milan and Friends
Milan and Friends

Reputation: 5610

jQuery solution, here's a FIDDLE

.car-right-image {
  position: absolute;
  width: 260px;
  left: -260px;
}


$(function() {
  setInterval(function() {
    $('.car-right-image').animate({ left: $(window).width() + 'px' }, 3000, 'linear', function() {
      $(this).css({ left: - $(this).width() + 'px' });
    });
  }, 10);
});

Upvotes: 1

Mircea
Mircea

Reputation: 11593

You need to use CSS Animations not transitions.

.car-right {
  position: absolute;
  top: 86%;
  left: -200px;
  z-index: 10;
  background-color: red;
  animation-duration: 4s;
  animation-name: goRight;
  animation-iteration-count: infinite;
}

@keyframes goRight {
  from {
    transform: translate(0,0);
  }

  to {
    transform: translate(1920px,0);
  }
}

There is no need for jQuery for this. Here is a demo running at a 4 seconds interval: http://jsfiddle.net/NrLy8/1/

Upvotes: 0

Related Questions