Как автоматически увеличить масштаб с помощью тега множественного изображения с помощью CSS

Question

с несколькими тегами изображений с разными изображениями, показывающими анимацию уменьшения масштаба, должны показывать один за другим в определенные секунды уменьшения масштаба, может подсказать, как сделать этот сценарий.

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(1, 1);
  }
  to {
    -webkit-transform: scale(1.5, 1.5);
  }
}


/* Standard syntax */

@keyframes zoom {
  from {
    transform: scale(1, 1);
  }
  to {
    transform: scale(1.5, 1.5);
  }
}

img {
  -webkit-animation: zoom 50s;
  /* Chrome, Safari, Opera */
  animation: zoom 50s;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png">
<img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png">
<img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png">

вывод выглядит аналогично, но с уменьшением масштаба