Question

我需要创建一个无限循环的图像动画，例如超级马里奥背景，该图像的末尾附加到同一图像的开始处，从而给人以为图像永无止境的感觉，但是要使用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;}
}

Answer 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>

Answer 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张随机图片和一个平均动画。

使用CSS关键帧创建无限循环

2 个答案: