从中心开始的无限水平动画

Question

我有一个云的背景，想要将其水平移动动画化。如果我从最左侧位置开始动画，则动画效果非常流畅，但如果我从中心开始动画，则变得突兀。

我知道原因，但不知道如何使其更加流畅。

从中间开始时出现了突兀情况：

.trt-clouds-1 {
  width: 100vw;
  height: 200px;
  background-image: url('https://image.flaticon.com/icons/svg/414/414927.svg');
  background-repeat: no-repeat;
  background-size: 10vw;
  animation: animatedBackground 4s linear infinite;
}

@keyframes animatedBackground {
  from {
    background-position: 30vw 0;
  }
  to {
    background-position: 100vw 0;
  }
}

<div class="trt-clouds-1"></div>

理想情况下，它应该从中心开始，然后走到最右边的点，再从最左边的点出来，继续到达中心。

- void

Answer 1

解决方案1：不太理想

根据您对“平滑”的定义（即从右边出去，从左边出来），您可以添加额外的断点。只需确保设置百分比时间正确，以便在到达右边之前和之后以相同的速度行驶。

如果您在右边和左边之间快速跳转，则应该可以平稳显示。

注：原始答案翻译成“最初的回答”

body, html {
  overflow: hidden;
}

.trt-clouds-1 {
  width: 100vw;
  height: 200px;
  background-image: url('https://image.flaticon.com/icons/svg/414/414927.svg');
  background-repeat: no-repeat;
  background-size: 10vw;
  animation: animatedBackground 4s linear infinite;
}

@keyframes animatedBackground {
  0% {
    background-position: 30vw 0;
  }
  63.6% {
    background-position: 100vw 0;
  }
  63.6000001% {
    background-position: -10vw 0;
  }
  100% {
    background-position: 30vw 0;
  }
}

<div class="trt-clouds-1"></div>

最初的回答：

动画总共移动110vw：向右70vw，返回40vw。为了使其平滑，动画在前往目的地的过程中花费了7/11（63.6%）的时间，在返回的过程中花费了剩下的时间，因此出现了这些时间。

---

解决方案2：非常优雅

第二个更优雅的选项是使用animation-delay属性和负的起始值。（虽然它不是从30vw开始，但你可以理解这个意思）。

html, body {
  overflow: hidden;
}

.trt-clouds-1 {
  width: 100vw;
  height: 200px;
  background-image: url('https://image.flaticon.com/icons/svg/414/414927.svg');
  background-repeat: no-repeat;
  background-size: 10vw;
  animation: animatedBackground 4s linear infinite;
  animation-delay: -2s;
}

@keyframes animatedBackground {
  0% {
    background-position: -10vw 0;
  }
  100% {
    background-position: 100vw 0;
  }
}

<div class="trt-clouds-1"></div>

- Jonathan Lam

---

@void 不客气！我认为这个 CSS 属性可能也会很有用——等几分钟，如果它有效的话，我也会把它加入到我的答案中。 - Jonathan Lam

Answer 2

html, body {
  overflow: hidden;
}

.trt-clouds-1 {
  width: 100vw;
  height: 200px;
  background-position: 0 0; /* or you can add -10vw 0 for more flexible view on start of load*/
  background-image: url('https://image.flaticon.com/icons/svg/414/414927.svg');
  background-repeat: no-repeat;
  background-size: 10vw;
  animation: animatedBackground 4s linear infinite;
  animation-delay: 0;
}

@keyframes animatedBackground {
  0% {
    background-position:-10vw 0;
  }
  100% {
    background-position: 100vw 0;
  }
}

<div class="trt-clouds-1"></div>

你唯一需要做的就是在你的CSS中添加一个背景位置

- Ali Qorbani

---

这并没有回答 OP 的问题，他问的是如何制作一个从中间开始的平滑动画。（而且看起来你复制了我的片段，只改变了 animation-delay -- 为什么？） - Jonathan Lam

“从中间开始平滑”到底是什么意思？是的，我已经复制并将其更改为我认为更好、更简单的方式。 - Ali Qorbani

理想情况下，它应该从中心开始，然后到达最右边的点，再从最左边的点出来并继续到达中心。他在从中心开始时遇到了麻烦。 - Jonathan Lam

我不知道为什么它会这样做!! - Ali Qorbani

Answer 3

另一个技巧是依赖于一定的百分比并像下面这样优化动画。

.trt-clouds-1 {
  height: 200px;
  background-image: url('https://image.flaticon.com/icons/svg/414/414927.svg');
  background-repeat: no-repeat;
  background-size: calc(200% + 10vw) 10vw;
  animation: animatedBackground 4s -2s linear infinite;
}

@keyframes animatedBackground {
  from {
    background-position:top right;
  }
}

<div class="trt-clouds-1"></div>

即使使用非全宽度的 div，也可以正常工作，因为我们不再在动画中依赖于 vw 单位：

.trt-clouds-1 {
  height: 200px;
  width:200px;
  border:1px solid;
  background-image: url('https://image.flaticon.com/icons/svg/414/414927.svg');
  background-repeat: no-repeat;
  background-size: calc(200% + 50px) 50px;
  animation: animatedBackground 4s -2s linear infinite;
}

@keyframes animatedBackground {
  from {
    background-position:top right;
  }
}

<div class="trt-clouds-1"></div>

有关计算的更多详细信息，请参阅相关问题：如何在线性渐变中使用百分比值设置背景位置

---

您还可以考虑使用伪元素和翻译来获得更好的性能：

.trt-clouds-1 {
  height: 200px;
  position:relative;
  overflow:hidden;
}
.trt-clouds-1:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:calc(200% + 10vw);
  height:10vw;
  background-image: url('https://image.flaticon.com/icons/svg/414/414927.svg');
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position:center;
  animation: animatedBackground 4s -2s linear infinite;
}

@keyframes animatedBackground {
  from {
    transform:translate(-50%);
  }
}

<div class="trt-clouds-1"></div>

- Temani Afif