制作动画浏览页面 css

Question

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

像这样：

左| em ipsum dolor sit 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。

制作动画浏览页面 css

Make an animation go through page css

javascript

css

gsap