动画结束时用other替换GIF

<div id="animation-container">
  <img src="animation.gif" alt="Animation">
  <span id="replacement-text">Loading...</span>
</div>

#animation-container {
  position: relative;
  width: 200px;
  height: 200px;
}

#animation-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: fadeOut 1s forwards;
}

#animation-container #replacement-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  color: #333;
  opacity: 0;
  animation: fadeIn 1s forwards;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

var animation = document.querySelector('#animation-container img');
var replacementText = document.querySelector('#animation-container #replacement-text');

animation.addEventListener('animationend', function() {
  animation.style.display = 'none';
  replacementText.style.opacity = 1;
});