Question 257653 in Html Question posted in
Some basic documentation can be found here.

Html – How to animate inside frame with infinite loop

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

currently it it going outside of div. How can i keep that inside frame and needs to continue in right side direction so it will look always full .

Tags:

3

Answers


  1. 0 
    .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>
    Login or Signup to reply.
  2. 0

    To achieve what you want you will need 2 separate images, as the first cannot appear at the left while still at the right. The images need to be positioned absolute for them to start from the same point, and ideally out of the container (-100px here) so we don’t see them until the animation starts. This needs the container to have a height, because absolute positionned elements don’t take place and don’t extend the container’s size.

    You can use the same animation if it’s well calculated, the animation of the second image is delayed half the total duration. Note that I changed the % to px because % will apply to the size of the image, not the container.

    .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 from beyond left boundary of the container (original position) */
  }
  50% {
    transform: translateX( 300px ); /* the half of the animation must be the moment the image starts disappearing to the right for it to loop properly */
  }
  66.6% {
    transform: translateX( 400px ); /* The disappearing to the right (the % is calculated to keep the same speed, eg we need to move 100px, the size of the image, and we moved 300px in 50% -> 50*100/300 = 16.6% to move 100px) */
  }
  100% {
    transform: translateX( 400px ); /* stay out of sight for the moment*/
  }
}

/* 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>
    Login or Signup to reply.
  3. 0

    To have the 300px element always ‘full’ you need a minimum of 3 of the 200px images you have chosen. [Think about what happens when an image is 50px across the element, there needs to be a bit of the image to the left and a bit to the right to fill the gaps].

    To make the ‘arithmetic’ easy this snippet uses 4 copies of the image, and puts them into an inner div inside the 300px element.

    It animates this inner div by just 50% of its width so that the animation looks continuous. The inner div is displayed flex so that the images are always on a line.

    <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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search