Question

151

CSS linear animation across screen

rated 0 times [ 155] [ 4] / answers: 1 / hits: 6146 / 11 Years ago, fri, january 24, 2014, 12:00:00

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-imagesrc=/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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jenamackennac

Add To Favorites

Follow

Total Points: 304

Total Questions: 110

Total Answers: 107

Location: Ecuador

Member since Thu, Jun 4, 2020

4 Years ago

jenamackennac questions

1 React render PDF file inside component based on API response

Fri, Feb 18, 22, 00:00, 2 Years ago

1 Webpack error: configuration.module.rules[0] has an unknown property 'query'

Mon, Aug 30, 21, 00:00, 3 Years ago

1 Vue is not defined/not a constructor

Wed, Apr 21, 21, 00:00, 3 Years ago

1 WebView2 - Get an attribute

Thu, Apr 1, 21, 00:00, 3 Years ago

1 IntersectionObserver API and TypeScript

Tue, Feb 2, 21, 00:00, 3 Years ago

View All

answered 11 Years ago samaraanandah · Accepted Answer

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/