Creating a seamless and captivating animation loop for continuous horizontal scrolling using HTML and CSS

I'm currently working on adding a continuous keyframe animation to the background image in the hero section of a page, using the translateX property for animation.

While it is functioning properly, I am encountering an issue where the animation abruptly restarts from the beginning instead of smoothly transitioning back.

I am looking for a solution to ensure that the animation progresses seamlessly without any disruptions.

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>

htmlcsscss-animationstailwind-css

Answer №1

adjusting 

width & height to 100vw & 100vh;
and applying overflow:hidden

eliminated width class on html with a massive 7000px width - why!? introduced the bg-no-repeat class to prevent images from repeating. shifted image position 100% to the right and -100% when animation hits 100%. reduced the duration of the animation

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Hover state remains persistent even after modal window is activated in outouchend

One of the buttons on my website has a hover effect that changes its opacity. This button is used to share information on Facebook. It's a simple feature to implement. Here is the CSS code: .social_vk, .social_fb { height: 38px; obj ...

javascriptjquerycss

The transition between backgrounds is malfunctioning

I want to create a smooth transition effect for changing the background of an element within a setInterval function. Currently, the background changes immediately, but I would like it to transition over a period of time. var act = true; setInterval(func ...

javascripthtmljquerycsscss-transitions

Steps for transforming a matplotlib animation into an HTML5 `<video>` element

Here is the code for a matplotlib animation graph and you can find instructions on how to save it here. from IPython.display import HTML import matplotlib.pyplot as plt import matplotlib.animation import numpy as np t = np.linspace(0,2*np.pi) x = np.sin ...

pythonhtmlmatplotlib

What is the method to choose an invisible link without an identifier using Selenium WebDriver?

I am attempting to click on the link labeled 'User Requested'. This link only appears when hovering over the menu. This is the HTML code: <ul class="k-widget k-reset k-header k-menu k-menu-horizontal" id="menu" data-role="menu" tabindex="0" ...

phphtmlseleniumxpathselenium-webdriver

The dropdown menu fails to update in Internet Explorer

Here is the URL for my website: . On this page, there are two fields - category and subcategory. When a category is selected, the corresponding subcategory should change accordingly. This functionality works smoothly in Google Chrome, however it encounte ...

javascriptmysqlhtml

Guide to creating an uncomplicated quiz using PHP

My goal is to create a quiz with 15 questions. Every time a user lands on the page, they will see a random selection of 5 questions. Each question will have 4 multiple choice answers, with one being correct. The marks allocated for each question are 20, 15 ...

phphtmlmysql

manage user assignments for multiple events in Django

Struggling to create a method for admin users to assign multiple events to users within the event details. The goal is to allow users to be associated with many events, and events to have multiple users linked to them. Unfortunately, I haven't been ab ...

pythonhtmldjango

What is the best way to animate elements so that they move in a circular motion?

My goal is to recreate the image shown in the picture: https://i.sstatic.net/z08II.jpg In case the image is blocked, you can view it here: https://i.sstatic.net/YYg4J.jpg The picture appears to have only one icon visible, but there are actually 4 icons. ...

javascriptjqueryhtmlcss

An issue occurred with the DOMException while trying to execute the 'setAttribute' function on the 'Element': '{{' is an invalid attribute identifier

Currently, the code is under development and some methods are still empty while the *ngIf directives may not be correct in terms of logic. However, even with these issues, I encountered the same error without bothering to remove them at this stage. While ...

javascripthtmlangular

Is it possible that the font-family attribute is not passed down to the input fields within a

Do the html form input elements like text fields or select boxes automatically inherit the font-family property from the body? For instance: body { font-family: 'Lucida Casual', 'Comic Sans MS'; } The above font will not be applied t ...

htmlcssformsfontsinput

"Error message stating 'Unresolved variable' occurs in the code while trying to assign className={styles.nameOfClass

My current task involves adjusting the style of a button in ReactJS using the "className" property. However, I encountered an error message in WebStorm stating "Unresolved variable nameOfClass," and the desired style changes did not reflect when running we ...

cssreactjstypescript

Is it possible to apply CSS opacity only to the background color without affecting the text on top of it

Is it possible to set the opacity property specifically for the background of a div, without affecting the text inside it? I attempted to achieve this with the following code: background: #CCC; opacity: 0.6; However, it seems like the opacity change is ...

cssopacity

Drop-Menu - Tubular Formation of Columns

I am currently facing a challenge in creating a filter on a web page using Bootstrap's drop-down menu. The issue lies in placing the filters in columns side by side, as they are stacking up instead. The filter menu is generated dynamically by looping ...

cssdrop-down-menubootstrap-5grid-layout

Creating an optical illusion using nested left borders in HTML and CSS for a captivating and repeating visual impact

I am looking to achieve a nested border-left effect on HTML lists where the left border moves in one step with each nested level: https://i.sstatic.net/QDS3d.png What I want is something similar to this with minimal gap between the listed term and bullet ...

htmlcsshtml-listsnested-lists

Issue with IE7 causing rollover navigation blocks to disappear when hovering over content

While conducting browser testing on the website The website's top navigation menu includes rollover effects for building services, exterior services, and commercial categories. The CSS-triggered navigation works seamlessly in all browsers except for ...

htmlcssinternet-explorer-7navigation

Excessive HTML and CSS overflow stretching beyond the boundaries of the page on the right

It seems like the issue lies with div.ü and div.yayın, as they are causing overflow on the right side of the page. When these elements are removed, the overflow issue goes away. Are there different positioning codes that can be used to prevent this? d ...

htmlcss

A variable in Javascript storing data about jQuery DOM elements

Currently, I am using the slick slider for my development (http://kenwheeler.github.io/slick/) In JavaScript, there is an event that returns a variable called 'slick' When I print the variable using console.log, this is what I see: https://i.s ...

javascriptjqueryhtmldomslick.js

Experience the seamless transition of new CSS animations

I designed a basic HTML game where a moving box disappears when clicked on. However, the animation that follows does not originate from the click location but rather from the original position. I believe the remove @keyframes at 0% should be based on the ...

javascripthtmlcsscss-animations

Implementing a JavaScript/CSS popup element within a PHP document

I recently attempted to add a popup div to my front page by following instructions from this guide Given that I am not well-versed in coding, I found it challenging to implement the code into my PHP file (which is for a WordPress site). Uncertain about wh ...

javascriptphphtmlcsspopup

What is causing my HTML to not recognize my Angular JS code?

Trying to dive into Angular JS, I wrote a small piece of code but for some reason, the HTML is not recognizing Angular JS. This is my index.html file: <!DOCTYPE HTML> <html ng-app="store"> <head> <link rel="stylesheet" type=" ...

javascripthtmlangularjs