CSS3 corrida

corrida.html

<div class="carros"></div>

.carros{
    background:#ccc;
    border-top:10px double #999;
    border-bottom:10px double #999;
    width:300px;
    height:32px;
    margin:40px auto;
    position:relative;
}
.carros:before,
.carros:after{
    content:'';
    display:block;
    width:50px;
    height:20px;
    opacity:0;
    position:absolute;
}
.carros:before{
    background:red;
    top:-15px;
    -webkit-animation:transition 2s ease infinite;
    -webkit-animation-delay:0.5s;
}
.carros:after{
    background:blue;
    bottom:-15px;
    -webkit-animation:transition 2s ease infinite;
    -webkit-animation-delay:1s;
}

@-webkit-keyframes transition{
  0%{opacity:0; -webkit-transform:translateX(-50px);}
  50%{opacity:1;}
  100%{opacity:0; -webkit-transform:translateX(300px);}
}