Анимация попутного ветра не работает при передаче значения задержки анимации через переменную. ⇐ CSS

[Anonymous]

Я работал с анимацией попутного ветра, и мне нужно было создать собственную анимацию для попутного ветра. Проблема в том, что когда я пытаюсь передать значение задержки анимации с помощью переменной или массива, анимация, похоже, не работает. Кажется, все работает отлично, когда я явно указываю значение задержки анимации.
Если вы думаете, что значение переменной передается неправильно, уверяю вас, что оно передается правильно. Я даже проверил в инструментах разработки Chrome, что класс анимации применяется.
И самое странное, что происходит, когда я передаю значение задержки 0.1, 0.2 или 0,3 из переменной, это работает просто отлично. Но если я попытаюсь использовать любое другое значение, скажем, 0,4, 0,24 и т. д., это не сработает.
Это действительно странная и странная проблема, с которой я столкнулся, и я потратил на нее больше дня, но все равно ничего.
Имейте в виду, что это не главная проблема, проблема очень обширна, и я пытаюсь суммировать проблему на очень простом примере, поэтому воздержитесь от предоставления других возможных решений. У меня есть другое решение, но оно мне нужно, чтобы сделать мою анимацию динамичной.
Вот код, который не будет работать, поскольку я передаю значение задержки 0,4

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

function AnimationBox() {
const delay = 0.4;
return (
className={`flex h-80 w-full animate-[slideIn_0.5s_${delay}s_both] bg-white`}
>
);
}

export default AnimationBox;

Вот код, который будет работать, когда я передаю значение задержки 0,2 (поскольку такие значения, как 0,1, 0,2 и 0,3, работают нормально)

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

function AnimationBox() {
const delay = 0.2;
return (
className={`flex h-80 w-full animate-[slideIn_0.5s_${delay}s_both] bg-white`}
>
);
}

export default AnimationBox;

Вот код, который также будет работать, поскольку я явно указываю значение задержки, и независимо от значения, оно будет работать нормально.

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

function AnimationBox() {

return (
className={`flex h-80 w-full animate-[slideIn_0.5s_0.123s_both] bg-white`}
>
);
}

export default AnimationBox;

Мне просто нужна причина, почему это не работает, и понять, как ведет себя вещь.

Подробнее здесь: https://stackoverflow.com/questions/780 ... hrough-a-v