[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({tituloVideo, videoUrl, descricao}) { return( <> {tituloVideo} {videoUrl} Descrição: {descricao} </> ) }

.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; }