Estou fazendo um projetinho em nextjs e queria colocar umas animações pra ficar mais legalzinho, MAS ELAS NÃO FUNCIONAM.

Vou deixar o código abaixo:

export default function Cardfilmes({tituloVideo, videoUrl, descricao}) {
    return(
        <>
            <div className={styles.container}>
                <div className={styles.title}>
                    <h2>{tituloVideo}</h2>
                </div>
                <div className={styles.content}>
                    <div className={styles.video}>
                        {videoUrl}
                    </div>
                    <div className={styles.descricao}>
                        <p className={styles.desctitle}>Descrição: </p>
                        <p>{descricao}</p>
                    </div>
                </div>
            </div>
        </>
    )
}

.container{
    width: 100%;
    max-width: 1400px;
    margin: 2rem auto;
    display: flex;
    gap: 1rem;
    flex-direction: column;
    justify-content: center;
}

.content {
    display: flex;
    width: 100%;
    gap: 1rem;
    animation: fly-in linear both;
    animation-timeline: view();
    animation-range: cover -10% cover 30%;
}

.descricao{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: justify;
}

.desctitle{
    font-weight: 600;
    font-size: 1.2rem;
}

[AJUDA] Scroll-driven Animations (CSS) não funciona no NEXTJS

Estou fazendo um projetinho em nextjs e queria colocar umas animações pra ficar mais legalzinho, MAS ELAS NÃO FUNCIONAM. Vou deixar o código abaixo: export default function Cardfilmes({ti...