使用css关键帧创建无限循环[重复]答案

【问题标题】：create infinite loop with css keyframes [duplicate]使用css关键帧创建无限循环[重复]
【发布时间】：2020-02-27 19:17:00
【问题描述】：

我需要创建一个无限循环的图像动画，例如超级马里奥背景，其中图像的结尾附加到同一图像的开头，给人一种图像永远不会结束的感觉，但是使用 css关键帧。

到目前为止，我已经做到了这一点，但这只会使图像来回移动。

我怎样才能做到这一点？

.waves {
    height: 320px;
    width: 700px;
    position: relative;
    top: -325px;
    background-repeat: repeat-x;
    animation: animatedImage 5s linear infinite;
    }


@keyframes animatedImage {
    0% { left: 0;}
    50%{ left : 500px;}
    100%{ left: 0;}
}

【问题讨论】：

你能在代码 sn-p 或 fiddle 中重现问题吗？

标签： javascript css css-animations keyframe

【解决方案1】：

如果你在最后一帧使用第一个位置，div 将被返回。

你是这个意思吗。

.waves {
    height: 700px;
    width: 700px;
    position: relative;
    top: -325px;
    background:red;
    background-repeat: repeat-x;
    animation: animatedImage 5s linear infinite;
    }
body{
overflow:hidden;
}

@keyframes animatedImage {
    0% { left: 2000px;}
   100% { left: -2000px;}
}

&lt;div class="waves"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

对于一个循环，从一边到另一边，动画的结束位置就足够了。

背景与前面的图像循环可以做到这一点。

html {
  background: white;
}
body {
  background: url(https://i.pinimg.com/originals/33/00/3a/33003a1defd04436523771717c661fcc.jpg)
    0% 80%;
  background-size: 100vw auto;
  animation: moves 4s infinite linear;
  min-height: 100vh;
  margin: 0;
  display: flex;
}
@keyframes moves {
  to {
    background-position: -100vw 80%;
  }
}
img {
  margin: auto;
  max-height: 50vh;
  animation: navigate 2s infinite;
}
@keyframes navigate {
/* 0 & 100% might not be needed */
  10% {
    transform: rotate(3deg) translate(-50px, 2vh);
  }
  50% {
    transform: rotate(-4deg) translate(-2vh, 50px);
  }
  25%,
  75% {
    transform: rotate(6deg) translate(50px, 2vh);
  }
}

&lt;img src=https://www.orkneyboats.com/sites/default/files/boat-images/ph20_0.png&gt;

您需要一些示例和测试来调整到您的预期结果，这些是来自搜索引擎的 2 个随机图像和一个平均动画。

【讨论】：