如何淡入淡出三张具有随机位置和随机大小的图像？

<div id="container"></div>

#container {
  position: relative;
  width: 500px;
  height: 500px;
  background-color: #ccc;
}

.image {
  position: absolute;
  transition: opacity 1s;
}

function fadeInOutImages() {
  var container = document.getElementById("container");
  
  for (var i = 0; i < 3; i++) {
    var image = document.createElement("img");
    image.src = "image" + i + ".jpg";
    image.className = "image";
    
    var randomX = Math.random() * 400; // 生成0到400之间的随机数
    var randomY = Math.random() * 400; // 生成0到400之间的随机数
    var randomSize = Math.random() * 200 + 100; // 生成100到300之间的随机数
    
    image.style.left = randomX + "px";
    image.style.top = randomY + "px";
    image.style.width = randomSize + "px";
    image.style.height = randomSize + "px";
    
    container.appendChild(image);
    
    // 淡入效果
    setTimeout(function(img) {
      img.style.opacity = 1;
    }, 1000 * i, image);
    
    // 淡出效果
    setTimeout(function(img) {
      img.style.opacity = 0;
    }, 4000 + 1000 * i, image);
  }
}

fadeInOutImages();