Как предотвратить вмешательство кнопки в анимацию букв в JavaScript? ⇐ CSS

[Anonymous]

Я пытаюсь анимировать буквы, чтобы они летали из случайных позиций, используя JavaScript. Он работает отлично. Однако когда я добавляю кнопку в HTML, анимация больше не работает должным образом — буквы появляются в центре, а не вылетают из случайных позиций. Как я могу это исправить, сохраняя кнопку в том же контейнере?
Вот мой код:

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

const letters = document.querySelectorAll('.letter');

function animateLetters() {
letters.forEach((letter, index) => {

// Generate rarndom initial positions
const randomX = (Math.random() - 0.5) * window.innerWidth;
const randomY = (Math.random() - 0.5) * window.innerHeight; //

// Apply CSS variables for animation
letter.style.setProperty('--random-x', `${randomX}px`);
letter.style.setProperty('--random-y', `${randomY}px`);

// Add staggered delay for smooth animation
letter.style.animationDelay = `${index * 0.2}s`;
});
}

// Trigger animation on load
animateLetters();

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

body {
background-color: #282c34;
color: #fff;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
overflow: hidden;
}

.container {
display: flex;
flex-wrap: wrap;
gap: 5px;
font-size: 2rem;
font-weight: bold;
text-align: center;
position: relative;
}

.letter {
position: relative;
opacity: 0;
animation: flyIn 1.5s ease forwards;
}

button {
position: relative;
margin-top: 20px;
padding: 10px 20px;
background-color: #61dafb;
color: #282c34;
border: none;
border-radius: 5px;
font-size: 1rem;
cursor: pointer;
}

button:focus {
outline: none;
}

button:hover {
background-color: #21a1f1;
}

@keyframes flyIn {
from {
opacity: 0;
transform: translate(var(--random-x), var(--random-y));
}

to {
opacity: 1;
transform: translate(0, 0);
}
}

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

L
e
t
'
s
 
o
r
g
a
n
i
z
e
 
e
v
e
r
y
t
h
i
n
g

Подробнее здесь: https://stackoverflow.com/questions/793 ... javascript