Jedna z dwóch animacji wykonuje się losowo (raz tak, raz nie)

A więc, mam następujące rozwiązanie (html+js+css+php, choć obstawiam, że to z JS jest problem). Mam sobie stronkę gdzie jest POST. Stronka przy postowaniu wykonuje operację na bazie danych, w zależności od powodzenia operacji ustawia wartość jednej zmiennej $_SESSION, no i stronka przekierowuje sama do siebie. W zależności od wartości tej jednej zmiennej wykonywana jest operacja require, która wczytuje plik php. W pliku tym znajduje się niewiele, bo jedynie komunikat, który ma być animowany (animacja pojawiania się, pozostanie 3 sekundy, animacja zniknięcia).
Problem w tym, że ta pierwsza animacja nie zawsze się wykonuje. Czasem komunikat po prostu pojawia się na stronie bez animacji, następnie odczekuje te 3 sekundy i znika już poprawnie.
Zakładam, że nie jest to problem PHP gdyż zaraz po poleceniu require daję unset na tę zmienną $_SESSION, więc po każdym przekierowaniu strony na siebie ta operacja jest robiona od zera.

Wrzucam zawartość pliku, w którym znajduje się komunikat oraz animacja.

<style>
.circ{
    opacity: 0;
    stroke-dasharray: 130;
    stroke-dashoffset: 130;
    -webkit-transition: all 2s;
    -moz-transition: all 2s;
    -ms-transition: all 2s;
    -o-transition: all 2s;
    transition: all 2s;
}
.tick{
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    -webkit-transition: stroke-dashoffset 2s 1s ease-out;
    -moz-transition: stroke-dashoffset 2s 1s ease-out;
    -ms-transition: stroke-dashoffset 2s 1s ease-out;
    -o-transition: stroke-dashoffset 2s 1s ease-out;
    transition: stroke-dashoffset 2s 1s ease-out;
}
.drawn + svg .path{
    opacity: 1;
    stroke-dashoffset: 0;

}
#tick1{
    padding-left: 2vh;
    height: 18vh;
    width: 18vh;
}

#komunikat {
    color: white;
    border-radius: 20px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 22vh;
    width: 22vh;
    display: block;
    padding: 25px;
    background-color: rgba(255,255,255,0.2);
}

#tekst {
    font-size: 2vh;
    line-height: 2vh;
    text-align: center;
    position: absolute;
    bottom: 2vh;
    width: 18vh;
    margin-left: 2vh;
}

</style>


<div id="komunikat">
<div id="tick1">
<div id="trigger"></div>
<svg version="1.1" id="tick" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 37 37" style="enable-background:new 0 0 37 37;" xml:space="preserve">
    <path class="circ path" style="fill:none;stroke:#0f0;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:10;" d="
	M30.5,6.5L30.5,6.5c6.6,6.6,6.6,17.4,0,24l0,0c-6.6,6.6-17.4,6.6-24,0l0,0c-6.6-6.6-6.6-17.4,0-24l0,0C13.1-0.2,23.9-0.2,30.5,6.5z"
	/>
    <polyline class="tick path" style="fill:none;stroke:#0f0;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:10;" points="
	11.6,20 15.9,24.2 26.4,13.8 "/>
</svg>
</div>
<div id="tekst">Urządzenie Wypożyczone</div>
</div>


<script>
document.addEventListener('DOMContentLoaded', (event) => {
document.getElementById("trigger").classList.add("drawn");
setTimeout(function(){
    document.getElementById("trigger").classList.remove("drawn");
    document.getElementById("komunikat").style.visibility = "hidden";
},3000);
});
</script>