JSFiddle - React, Tailwind, and code Playground

by Prathameshsb

HTML

<div id="parentElement">
  <div id="movingElement"></div>
</div>

CSS

#parentElement {
      position: relative;
      width: 100%;
      height: 50px;
      overflow: hidden; /* Ensure the child element stays within the parent's boundaries */
    }

    #movingElement {
      width: 50px;
      height: 50px;
      background-color: blue;
      transition: padding 0.5s;
      box-sizing: border-box; /* Include padding in the total width */
    }

JavaScript

let paddingValue = 0;
  const movingElement = document.getElementById('movingElement');

  setInterval(() => {
    paddingValue += 10; // Increment the padding value (adjust this based on your animation speed)
    movingElement.style.padding = `${paddingValue}px`;
  }, 500); // Adjust the interval duration (milliseconds) based on your animation speed