How to make a slots machine effect counnter using HTML and CSS

<style>
.experience_counter {
        display: flex;
        flex-direction: row;
        align-items: center;
        font-weight: 700;
        font-size: 32px;
        line-height: 1em;
        font-family: "Poppins", Sans-serif;
        color: #FFF;
        gap: 8px;
      }
      .experience_counter .container {
        height: 40px;
        overflow: hidden;
      }
      .experience_counter .slides {
        height: 480px;
        margin-top: -480px;
        will-change: transform; 
      }
      
      .experience_counter .slides{ animation-name: experience_counter;
          animation-duration: 1s;
         animation-delay: 3s;
        animation-fill-mode: forwards;
        animation-timing-function: ease-out; }
        
      .experience_counter .slide {
        height: 40px;
        display: flex;
        align-items: center;
      }

      @keyframes experience_counter {
        from {
          transform: translateY(0);
        }
        to {
          transform: translateY(480px);
        }
      }
</style>

<div class="experience_counter">
      <div class="container">
        <div class="slides">
          <div class="slide">25</div>
          <div class="slide">24</div>
          <div class="slide">22</div>
          <div class="slide">20</div>
          <div class="slide">18</div>
          <div class="slide">16</div>
          <div class="slide">14</div>
          <div class="slide">12</div>
          <div class="slide">10</div>
          <div class="slide">08</div>
          <div class="slide">06</div>
          <div class="slide">04</div>
          <div class="slide">02</div>
        </div>
      </div>
      <span>Years</span>
    </div>