Как создать переход с помощью CSS текста, который прокручивается справа налево и выходит слева и начинается снова без LAG - PullRequest
Новая
       16

Как создать переход с помощью CSS текста, который прокручивается справа налево и выходит слева и начинается снова без LAG

0 голосов
/ 21 ноября 2018

Я пытаюсь анимировать свою приборную панель с помощью прокручиваемого текста в нижнем колонтитуле внизу экрана.Почти удалось с некоторым CSS и абсолютной позицией, но иногда он "отстает", и это на каждом компьютере / экране, на котором я его тестировал.

Как это должно работать, текст прокручивается с правой стороныи прокрутите экран слева.

Css код 

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 7rem;
    font-family: 'Segoe UI';
    font-weight: 500;
    display: inline-block;
    background-color: #fcfcfc;
    color: black;
    border-top: 1px solid rgba(217, 217, 217, .5);
    text-align: center;
    padding-top: 0.5rem;
}

.footer .footer-text {
    vertical-align: -webkit-baseline-middle;
    white-space: nowrap;
    color:black;
    font-size: 2.7em;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    position:absolute;
    -webkit-animation: anim 25.5s infinite;
    animation: anim 25.5s infinite;
    -webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */
    animation-timing-function: linear;
}

@-webkit-keyframes anim {
    from {
        right: -300%;
    }
    to {
        right: 100%;
    }
}

@keyframes anim {
   from {
         right: -300%;
   }
   to {
       right: 100%;
   }
}

HTML-код 

<div class="footer">
    <div class="footer-text">
        <span>Some scrolling text here</span>
    </div>
</div>

Работает, но довольно часто отстает при запуске, вы можете видеть, что текст не является гладким.Протестировано в Chrome и Firefox (Chrome будет основным браузером, в котором будет запускаться приложение)

Есть ли какое-нибудь возможное решение этой проблемы, или просто невозможно с помощью css создать такую ​​анимацию?

Кстати, я использую Angular

Надеюсь, кто-то может прокомментировать возможное направление / исправить;)

1 Ответ

0 голосов
/ 21 ноября 2018

Попробуйте использовать CSS transform вместо изменения ссылки на позиционирование, заставляет браузер проверять повторы страниц и очень неэффективно.

@-webkit-keyframes anim {
    from {
        transform: translateX(300%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes anim {
   from {
         transform: translateX(300%);
   }
   to {
       transform: translateX(0);
   }
}
...