Make an animation go through page css

Question

Is it possible to make an animation that starts upper right of the page goes horizontally to the upper left of the page and start again at the upper right without making the animation elements disappear on both ends.

Like this:

Left| em ipsum dolor sit amet consectetuer adipiscing elit lor |Right

In the above example the text goes sort of round the page and starts over

I already tried using 2 divs with the same contents and as you can see below:

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

Thanks in advance!

Answer 1

There is no way for an element to be in two positions at once. But you can create this effect by duplicating the content (or by having a bunch of different content and wrapping each piece).

For how to do this with text, I recommend this thread on GreenSock's forums.

For how to do this with a bunch of different content this post has you covered.