Question

如果页面上占用了大量空间，我将使用此CSS代码自动滚动文本。使用javascript函数，如果有的话，将其添加到下面的类中。

滚动效果很好，但是我遇到了性能问题。它的动作非常不一致。有点断断续续。有什么我可以做的使其平滑滚动吗？我曾经在Windows上的Chrome和Firefox上进行过尝试，但是在Android上的Chrome和Firefox上进行过尝试，而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%);
  }
}

平滑的CSS动画向上滚动？

0 个答案: