<div class="carousel">
  <div>🐶</div>
  <div>🐱</div>
  <div>🐭</div>
  <div>🐹</div>
  <div>🐰</div>
  <div>🦊</div>
  <div>🐻</div>
  <div>🐼</div>
  <div>🐻‍❄️</div>
  <div>🦁</div>
  <div>🐸</div>
  <div>🐵</div>
  <div>🐔</div>
  <div>🐥</div>
  <div>🦇</div>
  <div>🐝</div>
  <div>🦋</div>
  <div>🐌</div>
</div>

<style>
  .carousel {
    display: flex;
    gap: 16px;
    padding: 64px 48px;
    max-width: 12em;
    overflow-x: scroll;
    scrollbar-width: none;
  }

  .carousel > div {
    animation: cubic-bezier(0.25, 0.46, 0.45, 0.94) disappear;
    animation-timeline: view(inline);
  }

  @keyframes disappear {
    0% {
      scale: 0;
    }

    5% {
      scale: 0;
    }

    15% {
      scale: 1;
    }

    85% {
      scale: 1;
    }

    100% {
      scale: 0;
    }
  }

  body {
    font-size: 40px;
  }
</style>