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%;
    }
}

...演示

＆＃13;

.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%;
    }
}

＆＃13;

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

＆＃13;

CSS：如何从屏幕左侧显示元素？

1 个答案: