在页面加载时，我需要弹跳高度递减的图像。我能够弹跳图像，但高度相同

.image {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 200px;
  animation: bounce 1s infinite;
}

@keyframes bounce {
  0% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-100px);
  }
  100% {
    transform: translateX(-50%) translateY(0);
  }
}

window.addEventListener('load', function() {
  var image = document.querySelector('.image');
  var height = 200;

  var timer = setInterval(function() {
    height -= 10;
    image.style.height = height + 'px';

    if (height <= 0) {
      clearInterval(timer);
    }
  }, 100);
});