화면의 CSS 선형 애니메이션

Question

나는 화면 오른쪽으로 움직이는 자동차를 가지고 있습니다. (차는 왼쪽 무한대부터 시작하여 오른쪽의 화면을 벗어나야합니다.)

그러나 애니메이션은 한 번만 반복되고 중지됩니다.

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

여기서 내가 뭘 잘못하고 있니? ... 어떻게하면 차가 왼쪽 무한대에서 계속오고 오른쪽으로 사라지게 할 수 있습니까? ...

키 프레임과 무한한 특성으로 뭔가해야한다는 것을 알고 있습니다.

그러나 캔트는 그것을 얻는 것처럼 보입니다 ...

도움이 매우 감사합니다.

감사 -Skykog는

Answer 1

당신은 CSS 애니메이션하지 전환을 사용해야합니다.

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

이 경우 jQuery가 필요하지 않습니다. 여기 데모가 4 초 간격으로 실행 : http://jsfiddle.net/NrLy8/1/

Answer 2

jQuery를 솔루션, 여기에 "나는 내가 해 키 프레임과 무한한 atrribute에 무언가를 알고있다."** 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); 
});