Почему анимация букв работает вне <button>, но не внутри него?

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

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





Letter Animation

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;
}

@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



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

function animateLetters() {
letters.forEach((letter, index) => {
const randomX = (Math.random() - 0.5) * window.innerWidth; // Random X
const randomY = (Math.random() - 0.5) * window.innerHeight; // Random Y

letter.style.setProperty('--random-x', `${randomX}px`);
letter.style.setProperty('--random-y', `${randomY}px`);

letter.style.animationDelay = `${index * 0.2}s`;
});
}

animateLetters();

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

Почему анимация букв работает вне , но не внутри него? ⇐ Html

Почему анимация букв работает вне