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

Posted 2023-03-06

【中文标题】使用css关键帧创建无限循环[重复]

【英文标题】：create infinite loop with css keyframes [duplicate]

【发布时间】：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 中重现问题吗？

【参考方案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;

<div class="waves"></div>

【参考方案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);
  

<img src=https://www.orkneyboats.com/sites/default/files/boat-images/ph20_0.png>

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