JSFiddle - React, Tailwind, and code Playground

HTML

<div id="image">
  <img src="https://www.gstatic.com/webp/gallery/4.sm.jpg">
</div>
<div id="player">
  <audio src="https://opus-codec.org/static/examples/ehren-paper_lights-96.opus" controls autoplay></audio>
</div>

CSS

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 100; }
}

@keyframes fadeOut {
  from { opacity: 100; }
  to { opacity: 0; }
}

#player {
  position: absolute;
  opacity: 0;
  animation-name: fadeIn;
  animation-duration: 2s;
  animation-delay: 10s;
  animation-fill-mode: forwards;
}

#image {
  position: absolute;
  animation-name: fadeOut;
  animation-duration: 2s;
  animation-delay: 10s;
  animation-fill-mode: forwards;
}