Angular 14: Animations not animating properly in my app but work perfectly in stackblitz demo

I'm using Angular Animations on my portfolio and instead of animating in and out they just pop up and disappear. I changed the timing to 9000ms to see if maybe it was happening too fast to notice and it pops up instantly when entering and delays for 9s before disappearing when leaving. Here's how I have everything defined.

export const mobileNavAnimation = trigger('mobileNav', [
    transition(':enter', [
        animate('9000ms', keyframes([
            style({
                translate: '0px -600px',
                offset: 0
            }),
            style({
                translate: '0px 0px',
                offset: 1
            })
        ]))
    ]),
    transition(':leave', [
        animate('9000ms', keyframes([
            style({
                translate: '0px 0px',
                offset: 0
            }),
            style({
                translate: '0px -600px',
                offset: 1
            })
        ]))
    ])
])

I have the BrowserAnimationsModule imported into my app.module.ts file and I imported the animation into the animations array in my component's metadata. I use it in my template by adding @mobileNav to the element. I initially used void =>* and * => void before switching to :enter and :leave and still get the same results.

This stackblitz demonstrates exactly what I'm doing and as you'll see when you run it, it works as expected. Does anybody know why it might work on there but not in my local project?