javascript - 制作一个动画遍历页面CSS

Question

是否可以使从页面右上角开始的动画水平移动到页面左上方，然后从右上角再次开始，而不使动画元素在两端消失。

像这样:

左| em ipsum dolor sat amet consectetuer adipiscing elit lor |右

在上面的示例中，文本在页面上绕了一圈并重新开始

我已经尝试使用 2 个具有相同内容的 div，如下所示:

 <footer class="footer ">
     <div class="footer__1 ">
         lorem ipsum dolor sit amet consectetuer adipiscing elit
     </div>
     <div class="footer__2 ">
         lorem ipsum dolor sit amet consectetuer adipiscing elit
     </div>
 </footer>

.footer {
height: 6vh;
position: fixed;
bottom: 0;
right: 0;
left: 0;
background: white;
overflow: hidden;
transform: translate3d(0, 0, 0);
.arrow {
    margin-left: 10px;
    margin-right: 10px;
}
&>div {
    position: absolute;
    top: 0;
    display: flex;
    height: 100%;
    align-items: center;
    text-align: center;
}
&__1 {
    transform: translate3d(0, 0, 0) translateX(10%);
    animation: infiniteText1 20s linear infinite;
}
&__2 {
    transform: translate3d(0, 0, 0) translateX(120%);
    animation: infiniteText2 20s linear infinite;
   }
}

@keyframes infiniteText1 {
    100% {
        transform: translateX(-100%);
    }
}

@keyframes infiniteText2 {
    100% {
        transform: translateX(20%);
    }
}

提前致谢!

Answer 1

一个元素不可能同时处于两个位置。但是您可以通过复制内容(或通过使用一堆不同的内容并包装每个部分)来创建此效果。

对于如何使用文本执行此操作，我建议 this thread on GreenSock's forums .

如何使用一堆不同的内容来做到这一点 this post has you covered .