Как сделать плавающий текст, который исчезает после нажатия кнопки? ⇐ CSS

[Anonymous]

Я пытался использовать эти коды для создания анимации с плавающим текстом.

Код: Выделить всё

const button = document.querySelector('.mainButton');
const popUpContainer = document.getElementById('popUpContainer');

button.addEventListener('click', function(event) {
const popUpText = document.createElement('span');
popUpText.textContent = '1+';
popUpText.classList.add('popUpText');
const x = event.clientX - popUpContainer.getBoundingClientRect().left;
const y = event.clientY - popUpContainer.getBoundingClientRect().top - 50;
popUpText.style.left = `${x}px`;
popUpText.style.top = `${y}px`;

popUpContainer.appendChild(popUpText);

setTimeout(function() {
popUpText.remove();
}, 2000);
});

Код: Выделить всё

.popUpContainer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}

.popUpText {
position: absolute;
color: white;
font-size: 20px;
animation: popUpAnimation 2s linear;
top: 50px;
}

@keyframes popUpAnimation {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-100px);
}
}

Код: Выделить всё

click me

Чтобы быть более конкретным, я хочу создать анимацию рядом с кнопкой, которая появляется и плавает вверх после нажатия кнопки, как эффект после нажатия кнопки. Но после того, как он проплывет 2 секунды вверх, он останавливается и исчезает. Я попробовал использовать приведенный выше код.
Возможно, я глуп, потому что у меня нет чего-то важного для одного (или всех) кодов. И я прошу прощения за любые неразумные действия.
Примечание: я знаю, что HTML-часть короткая, но есть еще кое-что, просто спрашивайте, если нужно.

Подробнее здесь: https://stackoverflow.com/questions/765 ... g-a-button