Guide to creating an endless loop animation within a frame

    <div className="sound-wave-container py-8">
      <img
        src={!recording ? Wave : DottedLine}
        className={!recording ? "sound-wave" : ""}
        alt="Sound Wave"
      />
    </div>


.sound-wave-container {
  outline: 1px inset #999;
  position: relative;
  overflow: hidden;
  width: 300px;
}


/* Define the animation */

@keyframes moveRightInfinity {
  0% {
    transform: translateX( 0%);
    /* Start from the left boundary of the container */
  }
  100% {
    transform: translateX( calc(100% - 100px));
    /* Move to the right, but stop before it fully exits the view. Adjust the "100px" to the width of your image if it's different */
  }
}


/* Apply the animation to the image */

.sound-wave {
  animation: moveRightInfinity 10s linear infinite;
}
<div class="sound-wave-container py-8">
  <img src="https://placekitten.com/200/300" class="sound-wave" alt="Sound Wave" />
</div>

It is currently extending beyond the div boundaries. I need to contain it within the frame and make it continually scroll in the right direction to always appear full.

htmlcss

Answer №1

.sound-wave-container {
  --width: 200px;
  outline: 1px inset #999;
  position: relative;
  font-size: 0;
  overflow: hidden;
  width: var(--width);
}

.sound-wave {
  object-fit: cover;
  animation: loop 10s linear infinite;
}

@keyframes loop {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}
<div class="sound-wave-container py-8">
    <img src="https://placekitten.com/200/300" class="sound-wave" alt="Sound Wave" />
</div>

Answer №2

In order to ensure that the 300px element appears full at all times, you will need a minimum of 3 of the 200px images you have selected. Consider the scenario where an image is only 50px wide within the element; there must be some of the image visible to the left and right in order to fill the gaps.

To simplify the arithmetic, this code snippet utilizes 4 copies of the image and places them inside an inner div within the 300px element.

The inner div is animated by 50% of its width so that the animation appears seamless. It is set to display as flex so that the images are always in line with each other.

<style>
  .sound-wave-container {
    outline: 1px inset #999;
    position: relative;
    overflow: hidden;
    width: 300px;
    display: flex;
  }
  /* Define the animation */
  
  @keyframes moveRightInfinity {
    0% {
      transform: translateX( -50%);
      /* Start from the left boundary of the container */
    }
    100% {
      transform: translateX(0%);
    }
  }
  /* Apply the animation to the image container */
  
  .inner {
    animation: moveRightInfinity 10s linear infinite;
    display: flex;
  }
</style>
<div class="sound-wave-container py-8">
  <div class="inner">
    <img src="https://placekitten.com/200/300" class="sound-wave" alt="Sound Wave" />
    <img src="https://placekitten.com/200/300" class="sound-wave" alt="Sound Wave" />
    <img src="https://placekitten.com/200/300" class="sound-wave" alt="Sound Wave" />
    <img src="https://placekitten.com/200/300" class="sound-wave" alt="Sound Wave" />
  </div>
</div>

Answer №3

To achieve your desired effect, you will need to use 2 separate images. The first image cannot be positioned at both the left and right simultaneously. These images should be absolutely positioned so that they start from the same point, ideally outside of the container (e.g., -100px) to remain out of sight until the animation begins. It's crucial for the container to have a specified height because absolutely positioned elements do not affect the size or dimensions of the container.

You can employ the same animation for both images if it's calculated correctly. The second image's animation should be delayed by half the total duration. Note that I switched from using percentages to pixels since percentages would apply relative to the image size, not the container's dimensions.

.sound-wave-container {
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 100px;
  border: 1px dashed red;
}

/* Define the animation */
@keyframes moveRightInfinity {
  0% {
    transform: translateX(0px); /* Start beyond the left boundary of the container (original position) */
  }
  50% {
    transform: translateX(300px); /* Halfway through, the image starts disappearing to the right for proper looping */
  }
  66.6% {
    transform: translateX(400px); /* Continues the disappearing effect to the right with careful calculation to maintain speed */
  }
  100% {
    transform: translateX(400px); /* Remains out of sight momentarily */
  }
}

/* Apply the animation to the image */
.sound-wave {
  position: absolute;
  top: 0;
  left: -100px;
  animation: moveRightInfinity 10s linear infinite;
}
.sound-wave2 {
  position: absolute;
  top: 0;
  left: -100px;
  animation: moveRightInfinity 10s linear 5s infinite; 
}
<div class="sound-wave-container">
  <img src="https://picsum.photos/100/100" class="sound-wave" alt="Sound Wave" />
  <img src="https://picsum.photos/100/100" class="sound-wave2" alt="Sound Wave" />
</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

Is it possible for a CSS code to be universally effective across all PHP files by setting style.css in header.php and then including header.php in each of the other PHP files?

Let me confirm, the code snippet from the header.php file is as follows: <link rel="stylesheet" href="style.css"> If I include the following code in every other php file: include 'header.php'; Will all the files have access to style.css ...

phpcss

What is the best way to display two radio buttons side by side in HTML?

Looking at my HTML form in this JSFiddle link, you'll see that when the PROCESS button is clicked, a form with two radio buttons appears. Currently, they are displayed vertically, with the female radio button appearing below the male radio button. I& ...

javascriptjqueryhtmlcssjsp

Using the window.history.pushState function triggers a page reload every time it is activated

I've been attempting to navigate from page to page without the need for a reload. I came across suggestions that using window.history.pushState() could achieve this, however, it appears that the page is still reloading. Furthermore, an attempt ...

javascriptphphtmljqueryajax

developing a seamless and uncomplicated banner text animation

Greetings everyone! I am diving into the world of JavaScript and recently attempted to create a banner carousel animation. Specifically, I have 3 banners in rotation where each slide reveals text with an animation effect. However, I'm encountering an ...

javascriptjquerycss

Encountering a 504-loadbalancer error (Gateway Time-out) on PythonAnywhere after waiting for 5 minutes for a response, despite setting SQLALCHEMY_POOL_RECYCLE to 600

Currently, I am utilizing the SPOTIPY API to insert a user's song, album, artist, and user_info into a database. Approximately 4,000 records are being inserted in total. The database updates successfully, but after 5 minutes (response_time = 300 secon ...

htmlmysqlflask-sqlalchemypythonanywherespotipy

Vue.js V-for not rendering any content

I am currently working on populating an array with objects retrieved from an API. The objects are being fetched successfully, but I am facing issues when trying to display them using v-for in the array. Below are my data variables: data() { return { ...

htmlvue.js

Issues accessing my Facebook account due to domain problems

I have developed an HTML5 game that I am currently running in my web browser. My objective is to integrate Facebook login functionality, so I followed a tutorial and replaced the necessary information with my App ID. However, upon running it, an error mes ...

javascripthtmlfacebook-javascript-sdk

What is the best method for eliminating the empty space below the footer?

I noticed a gap at the bottom of my website Header and CSS# There seems to be some white space at the bottom of my website's header even though I'm using bootstrap The white space issue in the header of my website persists despite using boot ...

htmlcssbootstrap-4footerspace

Achieving uniform distribution of items within a flex container

I have been struggling since yesterday to make this work. I just can't seem to get these flex items to fill the container equally in width and height. No matter what I try, it's not cooperating. <html> <meta charset="utf-8"> ...

htmlcssflexbox

Retrieve every HTML element that is currently visible on the screen as a result

I have a dynamic HTML table that updates frequently, with the potential for over 1000 rows. Instead of replacing the entire table each time it updates, I am exploring options to only update the visible rows. My initial approach involved iterating through ...

javascripthtmldom

elements overlap when styled differently

Hello all, I'm in need of some assistance with arranging the items on my webpage. As a beginner, I require detailed explanations as some things may be obvious to you but not to me :) Specifically, I am looking to enhance my header design. My goal is t ...

htmlcsswordpressbootstrap-4

Tips for dynamically passing a string into a Javascript function

Here is a JavaScript function that I have: function doIt(link) { alert(link); } I am using this function in the following JavaScript code snippet. Here, I am dynamically creating an anchor tag and appending it to my HTML page: jQuery.each(data, func ...

javascriptjqueryhtml

Nav Bar Toggle Button - Refuses to display the dropdown menus

My Django homepage features a Bootstrap navbar that, when resized, displays a toggle button. However, I am experiencing difficulty with dropdown functionality for the navbar items once the toggle button is activated. Can anyone provide guidance on how to a ...

javascripthtmlcssdjangobootstrap-4

Selecting dynamic attributes in VueJS - clearing out previous selections

The data attributes are pulled from an API and the names of the attributes are dynamic. However, for the sake of simplicity, I have included an example with an object containing Colour and Size. My main goal was to map the data to an object named selectedA ...

javascripthtmlvue.jsvuejs2

On what occasion is a DOM element considered "prepared"?

Here's a question that might make you think twice: $(document).ready(function() { }); Sometimes, the simplest questions lead to interesting discussions. Imagine having a list of elements like this: <body> <p>Paragraph</p> < ...

javascriptjqueryhtml

Can you explain the significance of a percentage in relation to the `word-spacing` property?

MDN states that the word-spacing property has the ability to accept a percentage value, which "specifies extra spacing as a percentage of the affected character’s advance width." However, there are some conflicting observations: The demonstration on th ...

css

Curved right side of div using CSS (see example image for reference)

I'm attempting to achieve this effect using CSS on a div element instead of an image. Here's the link I am referencing: https://i.sstatic.net/045dh.png If you take a look at the image provided in the example and focus on the right side, that&apo ...

css

The "html" element fails to achieve a full height when applying a 100% height setting

I am facing a height problem of 100% <!doctype html> <html> <head> <meta charset="utf-8"> <title>My Dreamweaver Website</title> <link rel="stylesheet" href="style.css"> </head> <body> <section clas ...

htmlcssdreamweaver

Alter the element's class during drag and drop操作

While in the process of dragging an element, I want to dynamically change its class or any CSS property based on its position. Here is what I have achieved so far: https://jsfiddle.net/twfegqgc/ The issue I am facing is that the class changes only when t ...

javascriptjqueryhtmlcss

What is the best way to align three images horizontally using bootstrap?

While working on my JavaScript class and creating one-page web apps, I had the idea to create a central hub to store and link them all together. Similar to Android or iOS layouts, I designed a page with icons that serve as links to each app. I managed to ...

htmlcsstwitter-bootstraptwitter-bootstrap-3