HTML CSS How to hide the 100% animated Moving Images?-CodePudding

I am trying to move the images from left to right within a element. Images animated properly, but at the end 100% the 1st image is going down, and then the 2nd image is also going down, and then the 3rd image. But I need to hide the images once it reaches 100% animated, 1st image moves 100% then it has to hide, and then 2nd need to hide, and then the 3rd. anybody can help me? thanks.

#pot {
  display: block;
  position: absolute;
  animation: linear infinite alternate;
  animation-name: run;
  animation-duration: 2s;
  margin-top: 1px;
  overflow: hidden;
}
@-webkit-keyframes run {
    0% {
      left: 0;
    }
    100% {
      left: 100%;
    }
}

    <body>
    <div id="pot">
    <img src="Images/image1.jpg" height="100px" width="100px">
    <img src="Images/image2.jpg" height="100px" width="100px">
    <img src="Images/image3.jpg" height="100px" width="100px">
    </div>
    </body>

CodePudding user response：

It’s wrapping at the end of the animation.

Add white-space: nowrap to the container.

#pot {
  display: block;
  position: absolute;
  animation: linear infinite alternate;
  animation-name: run;
  animation-duration: 2s;
  margin-top: 1px;
  overflow: hidden;
  white-space: nowrap;
}
@keyframes run {
    0% {
      left: 0;
    }
    100% {
      left: 100%;
    }
}

    <body>
    <div id="pot">
    <img src="Images/image1.jpg" height="100px" width="100px">
    <img src="Images/image2.jpg" height="100px" width="100px">
    <img src="Images/image3.jpg" height="100px" width="100px">
    </div>
    </body>