Как вставить изображение по одному?

Question

Я пытаюсь вставить три изображения в div один за другим, но на самом деле то, что я пытаюсь сделать, изображения идет один под другим, и в итоге просто застрял в своем исходном положении ..

вот код, который я пытаюсь:

<div class="parent">
  <div class="images">
      <img src="images/food.jpg" class="img1"></img>
      <img src="images/food2.jpg" class="img2"></img>
      <img src="images/food3.jpg" class="img3"></img>
  </div>
</div>

.parent {
  display: inline-block;
  width: 1080px;
  height: 333px;
}
.images {
  float: right;
  padding: 20px;
}

.images img {
  animation: slide-left 0.5s;
  margin-left: 20px;
  box-shadow: 0px 0px 29px 0px rgba(0,0,0,0.3);
  height: 293px;
}

@keyframes slide-left {
  from {
    margin-left: 100%;
  }

  to {
    margin-left: 0%;
  }

}

Тогда я бы через некоторое время выпустил изображение go. Вот как это выглядит сейчас, я выкладываю ссылку на gazazo в качестве картинки. было бы слишком большим для stackoverflow

https://i.gyazo.com/0a17441fd545e58e66e00dd08d8a9c24.gif

В то время как вот анимация, которую я сделал с фотошопом, и я хотел бы, чтобы это выглядело так ... (изображения идут и через некоторое время уходит)

https://i.gyazo.com/c8e0eed4a53992ce847c9fc372fb748d.gif

Answer 1

Я предлагаю использовать абсолютное позиционирование.

.images {
   position: relative;
   width: (your image width);
   height: (your image height);

}

.images img {
  animation: slide-left 0.5s;
  box-shadow: 0px 0px 29px 0px rgba(0,0,0,0.3);
  top: 0;
  left: -(your image width). <-- negative the width
}

@keyframes slide-left {
  from {
    left: (your negative left value)
  }

  to {
    margin-left: 0;
  }

}