Animate Seamless Background Image Infinitely with 100% Smooth Repeat/Loop, horizontal/vertical

Code for Left-Right/Right-Left

.seamlessBgLR {
  animation: seamlessBgLR 10s infinite linear;
  background-size: 100vw auto;
  background-repeat: repeat;
}
@keyframes seamlessBgLR {
    from {background-position:  0}
    to {background-position: 100vw}
}

Code for Top-Bottom/Bottom-Top

.seamlessBgTB {
  animation: seamlessBgTB 3s infinite linear;
  background-size: auto 100vh;
  background-repeat: repeat;
}
@keyframes seamlessBgTB {
    to {background-position: 0 100vh}
}

Code for Middle Object

.plane1-img{
animation: UpDownAnim 17s linear infinite;
}
@keyframes UpDownAnim {
0% {top: 0;}
50% {top: -25vh;}
100% {top: 0;}
}

All code for HTML file – Replace URL/src

<style>
.seamlessloop{
width: 90vw;
height: 100vh;
 background-image: url("https://demo.wwengineer.com/wp-content/uploads/2024/05/seamless-background-image-photo-cloudy_sky-blue_01-1024x512-1.png");
  animation: seamlessloop 10s infinite linear;
  background-size: 100vw auto;
  background-repeat: repeat;
}
@keyframes seamlessloop{
    from {background-position: 0}
    to {background-position:  100vw}
}
.seamlessloop img{
margin: 30vh 30vw;
animation: planepost1 15s linear infinite;
}
@keyframes planepost1 {
0% {margin-top: 50vh;}
50% {margin-top: 30vh;}
100% {margin-top: 50vh;}
}

</style>
<div class="seamlessloop">
<img src="https://demo.wwengineer.com/wp-content/uploads/2024/05/plane-with-ai-generated-free-png.webp" class="planepost1" width="250">
</div>