Сделать анимацию для изображения, идущего слева направо, пока не исчезнет

Question

У меня проблема при создании анимации с помощью CSS3.

вот моя скрипка: http://jsfiddle.net/fyanz92/m98jy/2/

мои коды:

.loading {
    width: 250px;
    height: 50px;
    background: #CEE7D3;
    margin: auto;
    z-index: 1005;
    top: -3px;
    padding: 15px;
    border-radius: 0px 0px 5px 5px;
    margin-top: -2px;
    border: 1px solid #73AD7F;
    box-shadow: 0px -2px 6px -4px #000 inset;
}
.mobil {
    position:absolute;
    -webkit-animation: gerakmobil 5s;
    animation: gerakmobil 2s infinite;
}
@-webkit-keyframes gerakmobil {
    0 % {
        top:0px;
        left:-50px;
        png-shadow:5px 5px 5px #222;
        -webkit-filter: drop-shadow(5px 5px 5px #222);
        filter: drop-shadow(5px 5px 5px #222)
    }
    25 % {
        top:0px;
        left:30px;
        png-shadow:5px 5px 5px #222;
        -webkit-filter: drop-shadow(5px 5px 5px #222);
        filter: drop-shadow(5px 5px 5px #222)
    }
    50 % {
        top:0px;
        left:100px;
        png-shadow:5px 5px 5px #222;
        -webkit-filter: drop-shadow(5px 5px 5px #222);
        filter: drop-shadow(5px 5px 5px #222)
    }
    75% {
        top:0px;
        left:100px;
        png-shadow:5px 5px 5px #222;
        -webkit-filter: drop-shadow(5px 5px 5px #222);
        filter: drop-shadow(5px 5px 5px #222)
    }
    100 % {
        top:0px;
        left:300px;
        png-shadow:5px 5px 5px #222;
        -webkit-filter: drop-shadow(5px 5px 5px #222);
        filter: drop-shadow(5px 5px 5px #222)
    }
}

но полученная анимация очень плохая и жесткая. Я хочу автомобильную анимацию, которая появляется слева и идет вправо, пока не исчезнет и бесконечно. когда средняя машина остановилась на мгновение, а затем снова пошла.

Answer 1

Я только что обновил вашу скрипку, думаю, это то, что вы искали. У вас есть ошибки в вашем коде, это мой результат CSS.

.loading {
    position:relative;
    width: 250px;
    height: 50px;
    background: #CEE7D3;
    margin: auto;
    border-radius: 0px 0px 5px 5px;
    border: 1px solid #73AD7F;
    box-shadow: 0px -2px 6px -4px #000 inset;
    overflow:hidden;
}
.mobil {
    position:absolute;
    height:50px;
    left:-50px;
    -webkit-animation: gerakmobil 5s;
    animation: gerakmobil 5s;
}

img{
    height:100%;
}

@-webkit-keyframes gerakmobil {
    0% {left:-50px;}
    50% {left:50%;}
    100% {left:100%;}
}