只显示gif一次

@keyframes playOnce {
  0% { background-position: 0 0; }
  100% { background-position: -1000px 0; }
}

.gif {
  width: 100px;
  height: 100px;
  background-image: url('example.gif');
  animation: playOnce 1s steps(10) forwards;
}

<img src="example.gif" id="gif" />

<script>
  var gif = document.getElementById('gif');
  var frameIndex = 0;
  var frameCount = 0;

  gif.addEventListener('load', function() {
    frameCount = gif.contentDocument.images.length;
    playGif();
  });

  function playGif() {
    if (frameIndex < frameCount - 1) {
      frameIndex++;
      setTimeout(playGif, 100); // 每100毫秒播放下一帧
    }
  }
</script>