Гладкая прокрутка анимации CSS? - PullRequest
Новая
       7

Гладкая прокрутка анимации CSS?

0 голосов
/ 23 октября 2018

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

Прокрутка работает отлично, но у меня есть проблемы с производительностью.Это движется довольно противоречиво.Немного изменчивый и медленный.Что я могу сделать, чтобы сделать прокрутку более плавной?Я пробовал на Chrome и Firefox на Windows, но также на Chrome и Firefox на Android, а производительность на Android намного хуже.

Пример: https://jsfiddle.net/zc12L4ka/

.vscroll {
    position: absolute;
    height: auto;
  /* Starting position */
  -moz-transform:translateY(100%);
  -webkit-transform:translateY(100%);
  transform:translateY(100%);
  /* Apply animation to this element */
  -moz-animation: scroll-up 25s linear infinite;
  -webkit-animation: scroll-up 25s linear infinite;
  animation: scroll-up 25s linear infinite;
 }
 /* Move it (define the animation) */
 @-moz-keyframes scroll-up {
  0%   { -moz-transform: translateY(100%); }
  100% { -moz-transform: translateY(-100%); }
 }
 @-webkit-keyframes scroll-up {
  0%   { -webkit-transform: translateY(100%); }
  100% { -webkit-transform: translateY(-100%); }
 }
 @keyframes scroll-up {
  0%   {
  -moz-transform: translateY(100%); /* Browser bug fix */
  -webkit-transform: translateY(100%); /* Browser bug fix */
  transform: translateY(100%);
  }
  100% {
  -moz-transform: translateY(-100%); /* Browser bug fix */
  -webkit-transform: translateY(-100%); /* Browser bug fix */
  transform: translateY(-100%);
  }
}
...