Javascript Code:

      
      const domContainer = document.querySelector(".dom")

      
      const newDiv = document.createElement("div")
      newDiv.classList.add("dom__wrapper")

      
      const div1 = document.createElement("div") div1.classList.add("dom__box")
      div1.textContent = "box"

      
      newDiv.appendChild(div1)

      
      if (domContainer) { domContainer.appendChild(newDiv) } else {
      console.error("Container not found.") }
    

Css code:

        .code {
          padding: 50px;
        }

        .dom {
          height: 600px;
          width: 100%;

          h2 {
            text-align: center;
            font-size: 32px;
            padding: 20px;
          }

          &__wrapper {
            height: 100%;
            width: 100%;
            background-color: darkblue;
            color: aliceblue;
            display: flex;
            justify-content: center;
            align-items: center;
          }

          &__box {
            height: 200px;
            aspect-ratio: 1;
            background-color: orangered;
            display: flex;
            justify-content: center;
            align-items: center;
            text-transform: capitalize;
            font-weight: 800;
            font-size: 32px;
            animation: LeftRight 5s infinite alternate;
          }

          @keyframes LeftRight {
            0% {
              transform: translate(calc(-50vw + 100px));
            }
            50% {
              // justify-content: center;
              transform: translateX(0vw);
            }
            100% {
              transform: translateX(calc(50vw - 100px));
            }
          }
        }