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

我刚刚更新了你的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%;}
}

使图像的动画从左向右运行直至消失

1 个答案: