CSS：如何使元素从屏幕左侧出现？

Question

我有一个元素，我希望它在屏幕右侧进行动画处理，然后从屏幕左侧开始。我希望它从屏幕右侧消失，然后再次从屏幕左侧出现。有没有办法我可以这样做？这是我到目前为止所拥有的。使用我的代码，它会在屏幕右侧显示动画，但随后元素会返回到其位置点，而我希望它再次从屏幕左侧出现。任何帮助深表感谢。

    .bus { position:absolute; top: 640px; left: 100px; height:150px; width:290px; z-index: 2; 
    -webkit-animation: myfirst 5s infinite;
    animation: myfirst 5s infinite;
    -webkit-animation-duration: 10s;
    animation-duration: 10s;

     animation-direction: normal;
      -webkit-animation-direction: normal;

}

    @-webkit-keyframes myfirst {
    0%   {left: 0%;}

    50%  {left: 100%;}

    100% {left:0%;}
}

@keyframes myfirst {
    0%   {left: 0%;}

    50%  {left: 100%;}

    100% {left:0%;}
}

Answer 1

您的代码是不言自明的。如果您不希望对象动画回0%，请忽略动画中的行...

@keyframes myfirst {
    0% {
        left: 0%;
    }
    100% {
        left: 100%;
    }
}

演示...

.bus {
    position: absolute;
    top: 0;
    left: 100px;
    height: 150px;
    width: 290px;
    z-index: 2;
    -webkit-animation: myfirst 5s infinite;
    animation: myfirst 5s infinite;
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    animation-direction: normal;
    -webkit-animation-direction: normal;
    background: red;
    width: 40px;
    height: 40px;
}
@-webkit-keyframes myfirst {
    0% {
        left: 0%;
    }
    100% {
        left: 100%;
    }
}
@keyframes myfirst {
    0% {
        left: 0%;
    }
    100% {
        left: 100%;
    }
}

<div class="bus"></div>