Сделать анимацию go через страницу css - PullRequest
Новая
       3

Сделать анимацию go через страницу css

0 голосов
/ 10 марта 2020

Можно ли сделать анимацию, которая начинается в правом верхнем углу страницы, идет горизонтально к верхнему левому углу страницы и начинается снова в правом верхнем углу, не пропуская элементы анимации с обоих концов.

Как это:

Слева | Em ipsum Dolor Sit Amet Conceteteer 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%);
    }
}

Заранее спасибо!

1 Ответ

1 голос
/ 11 марта 2020

Элемент не может быть в двух положениях одновременно. Но вы можете создать этот эффект, дублируя контент (или создавая кучу разного контента и упаковывая каждый фрагмент).

Как это сделать с текстом, я рекомендую эту тему на форумах GreenSock .

Как это сделать с кучей разного контента этот пост Вы покрыли .

...