Make animation for image running from left to right until disappear

Question

I have a problem when making animation with CSS3.

here my fiddle: http://jsfiddle.net/fyanz92/m98jy/2/

my codes:

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

but the resulting animation is very bad and stiff. I want a car animation that appears on the left and walk to the right until it disappears and infinitely. when the middle car paused a moment and then walked again.

Answer 1

I just updated your fiddle i think that is what you were looking for. You have errors in your code, that is my result 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%;}
}