Синхронизация animation css и setTimeout
 

Добрый день. Есть анимация на css:

<div class="notice__close" x-show="item.closable" :style="`--anim:${item.anim}`" style="--anim:url(&quot;data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cstyle%3ecircle %7b animation: 8000ms iixiv linear;%7d%40keyframes iixiv %7bfrom%7bstroke-dasharray:0 100%7dto%7bstroke-dasharray:100 0%7d%7d%3c/style%3e%3ccircle cx='12' cy='12' r='11' stroke='%23000' stroke-opacity='.2' stroke-width='2'/%3e%3c/svg%3e&quot;)"></div>
<style>
.notice__close {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m12 4-8 8M4 4l8 8' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
	background-size: 16px;
	background-position: center;
	background-repeat: no-repeat;
	cursor: pointer;
	margin-right: -0.5rem;
	position: relative;
	width: 24px;
	height: 24px;
}
.notice__close:before {
	content: '';
	position: absolute;
	background-image: var(--anim);
	background-repeat: no-repeat;
	background-size: contain;
	border-radius: 100%;
	box-shadow: inset 0 0 0 2px rgb(0 0 0 / 5%);
	width: 100%;
	height: 100%;
	margin: auto;
	transform: rotate(-90deg);
}
</style>

Мне нужно добавить событие после завершения анимации. Юзаю setTimeout:

<script>
setTimeout( () => {
	alert( 'Твой выход!' );
}, 8000 )
</script>

Проблема в том, что происходит рассинхрон. Сообщение выводится с задержкой. Подскажите, как это побороть?

addEventListener('animationend')

использовать не могу, так как сложно получить доступ к элементу.