使动画通过页面css答案

【问题标题】：Make an animation go through page css使动画通过页面css
【发布时间】：2020-03-10 16:09:53
【问题描述】：

是否可以让一个从页面右上方开始的动画水平到页面的左上方，然后从右上方重新开始，而不会使动画元素在两端消失。

像这样：

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

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

我已经尝试过使用 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%);
    }
}

提前致谢！

【问题讨论】：

标签： javascript css gsap

【解决方案1】：

一个元素不可能同时出现在两个位置。但是您可以通过复制内容（或通过拥有一堆不同的内容并包装每个部分）来创建这种效果。

关于如何使用文本，我推荐this thread on GreenSock's forums。

关于如何处理一堆不同的内容this post has you covered。

【讨论】：