如何使图片中的雨滴具有动画效果？

<div id="image-container">
  <img src="your-image.jpg" alt="Your Image">
  <div id="raindrops"></div>
</div>

#image-container {
  position: relative;
  width: 500px; /* 根据实际情况设置容器宽度 */
  height: 300px; /* 根据实际情况设置容器高度 */
}

#raindrops {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.raindrop {
  position: absolute;
  width: 2px; /* 雨滴宽度 */
  height: 20px; /* 雨滴高度 */
  background-color: blue; /* 雨滴颜色 */
  animation: fall linear infinite; /* 雨滴下落动画 */
}

@keyframes fall {
  0% {
    transform: translateY(-20px); /* 雨滴起始位置，根据实际情况设置 */
    opacity: 0; /* 雨滴起始透明度，根据实际情况设置 */
  }
  100% {
    transform: translateY(100%); /* 雨滴终止位置，根据实际情况设置 */
    opacity: 1; /* 雨滴终止透明度，根据实际情况设置 */
  }
}

var container = document.getElementById('raindrops');
var numDrops = 50; // 雨滴数量，根据实际情况设置

for (var i = 0; i < numDrops; i++) {
  var drop = document.createElement('div');
  drop.className = 'raindrop';
  drop.style.left = Math.random() * 100 + '%'; // 随机设置雨滴水平位置
  drop.style.animationDuration = Math.random() * 3 + 1 + 's'; // 随机设置雨滴下落时间
  container.appendChild(drop);
}