Временная шкала анимации, управляемой прокруткой, не работает в ванильном CSS ⇐ CSS

[Anonymous]

Итак, я настроил базовую анимацию, используя ключевые кадры и анимационную временную шкалу, чтобы она могла прокручиваться вместе с полосой, но пока это не работает, она работает в таких вещах, как перо кода. Я думал, что представление не зависит от того, прокручивается ли конкретный родительский элемент, несмотря на то, что по умолчанию он должен использовать прокручиваемый элемент (мое тело).

Я использую новейшую версию Chrome и использую Next JS для создания приложения, поэтому все должно работать.
.scaleIn { граница: черная, сплошная, 2 пикселя; анимация: ScaleAnimation линейная обе; непрозрачность: 0; временная шкала анимации: просмотр (блок); анимация-диапазон: содержит 60%, покрывает 100%; } @keyframes ScaleAnimation { от { преобразование: масштаб (0); } к { преобразование: масштаб (1); } }