Анимация ключевых кадров не воспроизводится в Firefox ⇐ CSS

[Anonymous]

Моя CSS-анимация работает так, как я хочу, в Edge и Chrome, но отказывается инициализироваться в Firefox. Я попробовал включить в анимацию теги -moz- и -keyframes-< /code> и ключевые кадры, но ничто не может заставить его работать в мобильной или настольной версии Firefox.
Я включил свою анимацию ниже, любая помощь приветствуется.

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

Your consumer-driven web hosting service.

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

.slogan {
opacity: 0;
transform: translateY(2.5rem);
animation: fade 2s ease 0.8s forwards;
}

@keyframes fade {
to {
opacity: 1;
transform: translateY(0);
}
}

.consumer {
transform: translateY(2.5rem);
background:
linear-gradient(var(--text) 0 0) 0 100% /var(--d, 0) 1px no-repeat,
linear-gradient(var(--text) 0 0) 100% calc(100% - 8px) /var(--d, 0) 1px no-repeat;
animation: underline 1s ease 1.5s forwards;
}

@keyframes underline {
to {
--d: 100%;
background-position: 0% calc(100% - 1px), 100% calc(100% - 2px);
transition: 1s, background-position 1s 1s;
transform: translateY(0);
}
}

Изменить:
Это ожидаемое поведение: https://imgur.com/a/SvPh9PO

Подробнее здесь: https://stackoverflow.com/questions/791 ... on-firefox