Add a new animation class to the previous class with JavaScript – Jquery

document.querySelectorAll('.box_icon').forEach(eye => {
    eye.addEventListener("click", function() {
    let excerpt = this.parentNode.querySelector(".box_excerpt");
    if (this.classList.contains("bi-play-circle-fill")) {
        this.classList = "bi bi-power box_icon";
        excerpt.style.display = "block";
        
      $(this).closest('.box_excerpt').toggleClass('animation_out');
        
    } else {
        this.classList = "bi bi-play-circle-fill box_icon";
        excerpt.style.display = "none"
        
        $(this).closest('.box_excerpt').toggleClass('animation_out');
        
      }
  });
}); 

   .box_main {
        display: flex;
        justify-content: space-around;
    }

    .box_mini {
        position: relative;
        overflow: hidden;
        width: 400px;
        height: 500px;
        background: #c992e8;
        box-shadow: 0 0 4px #000;
        transition: all 0.5s ease;
    }

    .box_icon {
        font-size: 80px;
        color: #4b80c4;
        position: absolute;
        top: 5%;
        left: 38%;
        z-index: 3;
    }

    .box_excerpt {
        position: absolute;
        top: -25px;
        left: 0;
        right: 0;
        bottom: -40px;
        z-index: 2;
        font-size: 20px;
        line-height: 36px;
        padding: 117px 25px 10px;
        color: #01831b;
        text-align: justify;
        background: #9effcd;
        overflow: hidden;
        display: none;
        animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        -webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }

    @-webkit-keyframes scale-in-center {
        0% {
            -webkit-transform: scale(0);
            transform: scale(0);
            opacity: 1;
        }

        100% {
            -webkit-transform: scale(1);
            transform: scale(1);
            opacity: 1;
        }
    }

    @keyframes scale-in-center {
        0% {
            -webkit-transform: scale(0);
            transform: scale(0);
            opacity: 1;
        }

        100% {
            -webkit-transform: scale(1);
            transform: scale(1);
            opacity: 1;
        }
    }

    .animation_out {
        animation: scale-out-center 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
        -webkit-animation: scale-out-center 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    }

    @-webkit-keyframes scale-out-center {
        0% {
            -webkit-transform: scale(1);
            transform: scale(1);
            opacity: 1;
        }

        100% {
            -webkit-transform: scale(0);
            transform: scale(0);
            opacity: 1;
        }
    }

    @keyframes scale-out-center {
        0% {
            -webkit-transform: scale(1);
            transform: scale(1);
            opacity: 1;
        }

        100% {
            -webkit-transform: scale(0);
            transform: scale(0);
            opacity: 1;
        }
    }

<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="box_main">

        <div class="box_mini">
            <i class="bi bi-play-circle-fill  box_icon"></i>
            <p class="box_excerpt">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus nam alias velit nihil dolorum
                corporis hic quibusdam exercitationem reiciendis nostrum. Dolor nam aliquam veritatis modi sequi
                mollitia quam quod, distinctio quidem, nisi soluta natus praesentium odio assumenda sunt tempora a culpa
                pariatur labore ea quaerat porro quae dolore! Modi rerum accusantium accusamus ipsam eos sequi at ullam,
                laboriosam nemo quis omnis odit dicta voluptatem officiis? Vitae optio quos nihil molestias dicta at
                praesentium error incidunt ratione qui. Accusantium beatae ex eaque saepe cupiditate hic tenetur. Totam
                earum consequuntur atque sunt tempore possimus saepe odit. Nam, voluptatum. Quo esse possimus ipsa.
            </p>
        </div>

        <div class="box_mini">
            <i class="bi bi-play-circle-fill  box_icon"></i>
            <p class="box_excerpt">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus nam alias velit nihil dolorum
                corporis hic quibusdam exercitationem reiciendis nostrum. Dolor nam aliquam veritatis modi sequi
                mollitia quam quod, distinctio quidem, nisi soluta natus praesentium odio assumenda sunt tempora a culpa
                pariatur labore ea quaerat porro quae dolore! Modi rerum accusantium accusamus ipsam eos sequi at ullam,
                laboriosam nemo quis omnis odit dicta voluptatem officiis? Vitae optio quos nihil molestias dicta at
                praesentium error incidunt ratione qui. Accusantium beatae ex eaque saepe cupiditate hic tenetur. Totam
                earum consequuntur atque sunt tempore possimus saepe odit. Nam, voluptatum. Quo esse possimus ipsa.
            </p>
        </div>

    </section>