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）具有一堆属性，其中包括animation-timing-function：

指定CSS动画在每个周期内应如何进行。

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

如果您希望动画的“速度”不波动，则应使用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的跳动滚动动画

1 个答案: