CSS-анимация не работает на действующем сайте после развертывания на GitHub ⇐ CSS

[Anonymous]

Я работаю над проектом, в котором использую CSS-анимацию с @keyframes. Эти анимации отлично работают, когда я тестирую локально с помощью Live Server, но как только я развертываю код на GitHub, анимации больше не работают на действующем сайте. Я не уверен, что вызывает проблему. Сейчас я использую React.
Вот фрагмент моего CSS:
Ключевые кадры:

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

@keyframes appear {
from {
opacity: 0;
scale: 0.5;
filter: blur(5px);
}
to {
opacity: 1;
scale: 1;
filter: blur(0px);
}
}

@keyframes slideIn {
from {
transform: translateX(100%);
opacity: 0;
filter: blur(5px);
}
to {
transform: translateX(0);
opacity: 1;
filter: blur(0px);
}
}

@keyframes appearBlur {
from {
opacity: 0;
filter: blur(2px);
}
to {
opacity: 1;
filter: blur(0px);
}
}

Стили компонентов:

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

.ImgArturo {
animation: appearBlur 0.5s ease forwards;
animation-timeline: view(); /* Experimental property */
animation-range: entry 0% cover 40%; /* Experimental property */
}

.Especialidades h2 {
animation: appearBlur 0.5s ease forwards;
animation-timeline: view();
animation-range: entry 0% cover 30%;
}

.grid-item {
animation: appear linear;
animation-timeline: view();
animation-range: entry 0% cover 30%;
}

.sobreMiBloque2 h2 {
animation: appearBlur 0.5s ease forwards;
animation-timeline: view();
animation-range: entry 0% cover 30%;
}

.timeline-item {
animation: appear linear;
animation-timeline: view();
animation-range: entry 0% cover 30%;
}

.btn-vermas {
animation: appearBlur linear;
animation-timeline: view();
animation-range: entry 0% cover 15%;
}

.UltimosArtTitle {
animation: appearBlur linear;
animation-timeline: view();
animation-range: entry 0% cover 40%;
}

.descripcionUltimosArticulos {
animation: appearBlur linear;
animation-timeline: view();
animation-range: entry 0% cover 40%;
}

Я пытался решить эту проблему с помощью ChatGPT, но это мало помогло.


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