css 跳动的滚动动画

Question

我的网站页脚上有一个小 CSS 动画，它有点跳动，因为它刚刚重新开始 - 我怎样才能使它运行流畅且连续？谢谢！

footer {
  background-color: #222222;
  height: 40px;
  margin-left: -200px;
  word-spacing: 5px;
  width: 3000%;
  position: fixed;
  bottom: 0;
  font-family: Bespoke C1lzphnm8n Webfont;
  font-size: 28px;
  padding: 8px 0 0 0;
}

.slide {
  animation: slide 12s infinite;
}

@keyframes slide {
  0% {
    transform: translateX(0px);
  }
  25% {
    transform: translateX(-200px);
  }
  50% {
    transform: translateX(-400px);
  }
  75% {
    transform: translateX(-600px);
  }
  100% {
    transform: translateX(-800px);
  }
}

<footer class="slide">
  <a target="_blank" href="http://mixcloud.com/phuzzphuzzphuzz">FULL SHOW HERE FULL SHOW HERE FULL SHOW HERE FULL SHOW HERE FULL SHOW HERE FULL SHOW HERE FULL SHOW HERE FULL SHOW HERE FULL SHOW HERE FULL SHOW HERE FULL SHOW HERE FULL SHOW HERE FULL SHOW HERE FULL SHOW HERE   </a>
</footer>

Answer 1

CSS 动画，如此处所述 -> CSS Animations, have a bunch of properties including the animation-timing-function 其中：

specifies how a CSS animation should progress over the duration of each cycle.

animation-timing-function 的初始值为 ease，这会导致您正在谈论的 'jumpy' 效果。它是 ease-out 和 ease-in 的组合，这意味着动画开始缓慢，然后正常，然后缓慢结束。

如果你想要一个在 'speed' 中不波动的动画，那么你应该使用 animation-timing-function: linear.

要在一行中编写动画，请使用：animation: slide 12s infinite linear;，这将转换为

{
 animation-name: slide;
 animation-duration: 12s;
 animation-iteration-count: infinite;
 animation-timing-function: linear;
}

请参阅下面的代码片段：

footer {
  background-color: #222222;
  height: 40px;
  margin-left: -200px;
  word-spacing: 5px;
  width: 3000%;
  position: fixed;
  bottom: 0;
  font-family: Bespoke C1lzphnm8n Webfont;
  font-size: 28px;
  padding: 8px 0 0 0;
}

.slide {
  animation: slide 12s infinite linear;
}


@keyframes slide {
  0% {
    transform: translateX(0px);
  }
  25% {
    transform: translateX(-200px);
  }
  50% {
    transform: translateX(-400px);
  }
  75% {
    transform: translateX(-600px);
  }
  100% {
    transform: translateX(-800px);
  }
}

<footer class="slide">
  <a target="_blank" href="http://mixcloud.com/phuzzphuzzphuzz">FULL SHOW HERE FULL SHOW HERE FULL SHOW HERE FULL SHOW HERE FULL SHOW HERE FULL SHOW HERE FULL SHOW HERE FULL SHOW HERE FULL SHOW HERE FULL SHOW HERE FULL SHOW HERE FULL SHOW HERE FULL SHOW HERE FULL SHOW HERE   </a>
</footer>

css 跳动的滚动动画

jumpy scroll animation with css

css

animation

footer