Как бы мне перевести это постепенное появление анимации прокрутки в мой Tailwind.config

заголовок. Просто пытаюсь создать простой CSS, который проявляется только при анимации прокрутки. CSS правильный, но, похоже, не работает, если его просто поместить в файл CSS. Я предполагаю, что компилятор попутного ветра делает с этим какие-то странности.

CSS приведен ниже вместе с моей текущей попыткой добавить его в конфигурацию. Я также добавил класс animate-fade к нужным элементам img.

Прочитали документацию и попробовали различные комбинации, но документация не очень подходит для этих целей. Любая помощь приветствуется.

CSS использует другие настройки конфигурации, но это только потому, что я тестирую.

Использование Вите.

сайт.css:

.fade {
    scale: 0.7;
    opacity: 0;
    animation: fade linear forwards;
    animation-timeline: view();
    animation-range-start: cover;
    animation-range-end: 200px;
}

@keyframes fade {
    to {
        scale: 1;
        opacity: 1;
    }
}

хвостовой ветер.config.js

    theme: {
        extend: {
            keyframes: {
                fade: {
                    from: { scale: "0.6", opacity: "0.6" },
                    to: { scale: "1", opacity: "1" },
                },
            },
            animation: {
                fade: "fade linear forwards",
            },....