html - 为图像从左到右运行直到消失制作动画

Question

我在使用 CSS3 制作动画时遇到了问题。

这是我的 fiddle :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

我刚刚更新了你的 fiddle我想这就是你要找的。 你的代码有错误，那是我的结果 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%;}
}