HTML/CSS - Smooth animation loop for infinite horizontal scroll

Question

I'm trying to implement an infinite keyframe animation for a background image for the hero section of a page by animating the translateX property.

It runs fine, however when it reaches the end of the animation it "jumps" back to the beginning without it being smooth.

I would like for it to smoothly go on without any "jumps."

body,html{
 height:100%;
 width: 100%;
}

<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
  theme: {
    extend: {
      keyframes: {
        slide: {
          '0%': { transform: "translateX(0)" },
          '100%': { transform: "translateX(-2509px)" },
        },
        slidemobile: {
          from: { transform: "translateX(0)" },
          to: { transform: "translateX(-375px)" },
        },
      },
      animation: {
        slide: "slide 45s infinite linear",
        slidemobile: "slidemobile 20s infinite linear",
      },
    }
  }
}
</script>

<div id="img-background" class="bg-contain bg-repeat-x h-full animate-slidemobile w-[1125px] bg-[url('https://picsum.photos/200')] sm:animate-slide sm:w-[7527px]">
</div>

what do you want it to do?

UmairFarooq
– UmairFarooq

2022-09-22 17:22:29 +00:00
Commented Sep 22, 2022 at 17:22 — UmairFarooq
– UmairFarooq, Commented Sep 22, 2022 at 17:22
I want the picture to scroll infinitely from left to right

letroot
– letroot

2022-09-22 17:24:39 +00:00
Commented Sep 22, 2022 at 17:24 — letroot
– letroot, Commented Sep 22, 2022 at 17:24

UmairFarooq · Accepted Answer · 2022-09-22 17:33:28Z

set width & height to 100vw & 100vh; & overflow:hidden

removed width class from html.7000px width why!?. added class of bg-no-repeat which makes the images only once. changing the image position to 100% to its right and -100% when animation reaches 100%. shortened the animation timer

body,html{
 height:100vh;
 width: 100vw;
 overflow:hidden
}

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"/>
<script src="https://cdn.tailwindcss.com"></script>
<script>
  tailwind.config = {
    theme: {
      extend: {
        keyframes: {
          slide: {
            '0%': {
              transform: "translateX(100%)"
            },
            '100%': {
              transform: "translateX(-100%)"
            },
          },
          slidemobile: {
            from: {
              transform: "translateX(100)"
            },
            to: {
              transform: "translateX(-100)"
            },
          },
        },
        animation: {
          slide: "slide 5s infinite linear",
          slidemobile: "slidemobile 5s infinite linear",
        },
      }
    }
  }
</script>

<div id="img-background" class="bg-contain bg-no-repeat h-full animate-slidemobile bg-[url('https://picsum.photos/200')] sm:animate-slide ">
</div>

Collectives™ on Stack Overflow

HTML/CSS - Smooth animation loop for infinite horizontal scroll

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related