create infinite loop with css keyframes

Question

I need to create an animation of an image that loops infinitely, like a super mario background, where the end of the image is attached to the beggining of the same image, giving the perception that the image never ends, but using css keyframes.

So far I've come to this, but this only makes the image move back and forth.

How can I achieve that?

.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;}
}

Can you recreate the issue in a code snippet or fiddle? – Kobe Nov 01 '19 at 13:39 — Kobe, Nov 01 '19 at 13:39

score 3 · Answer 1 · answered Nov 01 '19 at 14:09

for a loop , coming from a side to the other, an ending position for animation is enough.

a background looping with an image at front can do it.

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>

you need a few example and test to tuneto your expected result, these are 2 random image from a search engine and an average animation.

score 0 · Answer 2 · answered Nov 01 '19 at 14:03

If you use first location in last frame, div will be return back.

Did you mean this.

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

create infinite loop with css keyframes

2 Answers2