Как правильно анимированно добавлять и удалять дочерние элементы у родителя?

Идея такая есть уведомления которые должны выводится на страницу. если их больше 3, первое уведомление должно анимированно уйти. Реализовал я это так:

<div class="page__webazex-messages-container" id="w-parent">
    <div class="webazex-messages-container__stack" id="m-parent">
       //Вот сюда будут выкидываться уведомления 
    </div>
</div>

стили анимации

@keyframes showMessage {
    0% {
        margin-top: 100vh; 
        opacity: 0;
    }
    10% {
        margin-top: 90vh;
        opacity: 0,2;
    }
    20% {
        margin-top: 80vh;
        opacity: 0,2;
    }
    30% {
        margin-top: 70vh;
        opacity: 0,2;
    }
    40% {
        margin-top: 60vh;
        opacity: 0,2;
    }
    50% {
        margin-top: 50vh;
        opacity: 0,3;
    }
    75% {
        margin-top: 40vh;
        opacity: 0,4;
    }
    80% {
        margin-top: 35vh;
        opacity: 0,4;
    }
    90% {
        margin-top: 25vh;
        opacity: 0,4;
    }
    100% {
        /*left: 100px;*/
        opacity: 1;
        margin-top: unset;;
    }
}
@keyframes hideMessage {
    0% {
        opacity: 1;
        /*top: 14%;*/
    }
    50% {
        /*top: 13%;*/
        opacity: 0.5;
    }
    100% {
        /*top: 10%;*/
        opacity: 0;
    }
}

Вот так выглядит функция добавления

function adding(){
            var message = '<div class="stack__message show">' +
            '<div class="message__content">'+
            '<span class="content__close">X</span>' +
            '<div class="content__container">' +
            '<div class="container__avatar"><span class="avatar__png"></span> </div> <span class="container__text"> Цена выросла</span>'+
            '</div></div></div>';
            $('#m-parent').prepend(message);
            // $('.stack__message').last().css({'display':'flex'});
            // $('.stack__message').last().addClass('show');
});

притом если делать .append() то они добавляются нормально, с правильной анимацией, но тогда проблема с удалением, если же делать как сейчас - то все плохо.

Удаляю я их так:

function removing() {
            $('.stack__message').first().removeClass('show');
            $('.stack__message').first().addClass('hide');
            if(($('.stack__message').first().is(':animated') == true)) {
                console.log("animated");
            }else{
                $('.stack__message:nth-child(1)').last().remove();
                console.log("animated end");
            }


                
        }

Проблема в том что если делать .append() - то удаляется и притом не анимируется, тот элемент который только что добавился а это не правильно, а если добавлять элемент в конец - вообще не понятно что происходит. Ссылка на реализацию с .append() где можно посмотреть и потыкать - тут: с добавлением в начало Реализацию с добавлением в конец и ссылку на свои ковыряния я выложил сюда.

https://jsfiddle.net/webazex/s16wegv9/2/